canvas绘图基础.docx
- 文档编号:16493477
- 上传时间:2023-07-14
- 格式:DOCX
- 页数:14
- 大小:165.18KB
canvas绘图基础.docx
《canvas绘图基础.docx》由会员分享,可在线阅读,更多相关《canvas绘图基础.docx(14页珍藏版)》请在冰点文库上搜索。
canvas绘图基础
理论知识
canvas是基于状态进行绘制的,为了是各个形状独立,必需用到beginPath
canvas动画:
一个个静态的画面连续播放就产生了动画,不断的清除和绘制就产生了canvas动画,canvas动画就是一个不断重绘的过程。
绘制方法
初始化
获取画布对象
varcanvas=document.getElementById('canvas');
获取绘图的上下文环境
varcxt=canvas.getContext('2d');
绘制线
cxt.moveTo(100,100);//可以使用多个实现断点
cxt.lineTo(500,100);
cxt.lineTo(500,500);
cxt.lineCap='round';//线条端点样式 butt- 默认 /round-圆角 /square-方角
cxt.lineJoin='round';//线条交点样式miter-默认/round-圆角/bevel-斜接(方角)
cxt.miterLimit=10;属性设置或返回最大斜接长度 默认为10
绘制弧形
cxt.arc(100,100,100,0,0.5*Math.PI);
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数值
参数
描述
x
圆的中心的x坐标。
y
圆的中心的y坐标。
r
圆的半径。
sAngle
起始角,以弧度计。
(弧的圆形的三点钟位置是0度)。
eAngle
结束角,以弧度计。
counterclockwise
可选。
规定应该逆时针还是顺时针绘图。
False=顺时针,true=逆时针。
arcTo
context.arcTo(x1,y1,x2,y2,r);
用法:
cxt.beginPath();
cxt.strokeStyle="#f00";
cxt.lineWidth=4;
cxt.moveTo(200,100);
cxt.arcTo(500,100,500,500,100);
cxt.lineTo(500,400);
cxt.arcTo(200,400,200,100,100);
cxt.closePath();
贝塞尔曲线
二次贝塞尔曲线
∙开始点:
moveTo(20,20)
∙控制点:
quadraticCurveTo(20,100,200,20)
∙结束点:
quadraticCurveTo(20,100,200,20)
JavaScript语法:
context.quadraticCurveTo(cpx,cpy,x,y);
参数值
参数
描述
cpx
贝塞尔控制点的x坐标
cpy
贝塞尔控制点的y坐标
x
结束点的x坐标
y
结束点的y坐标
三次贝塞尔曲线
∙开始点:
moveTo(20,20)
∙控制点1:
bezierCurveTo(20,100,200,100,200,20)
∙控制点2:
bezierCurveTo(20,100,200,100,200,20)
∙结束点:
bezierCurveTo(20,100,200,100,200,20)
提示:
请查看 quadraticCurveTo()方法。
它有一个控制点,而不是两个。
JavaScript语法:
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
参数值
参数
描述
cp1x
第一个贝塞尔控制点的x坐标
cp1y
第一个贝塞尔控制点的y坐标
cp2x
第二个贝塞尔控制点的x坐标
cp2y
第二个贝塞尔控制点的y坐标
x
结束点的x坐标
y
结束点的y坐标
绘制矩形
cxt.rext(x,y,w,h); 只是规划了路径,需要用cxt.fill();或者cxt.stroke()绘制
cxt.fillRect(x,y,w,h); 会根据cxt.fillStyle的样式直接绘制,无需再使用cxt.fill();
cxt.strokeRect(x,y,w,h);
渲染文本
cxt.font="bold20pxarial";//不需要的属性可以省略
默认值:
10pxsans-serif
JavaScript语法:
context.font="italicsmall-capsbold12pxarial";
属性值
值
描述
font-style
规定字体样式。
可能的值:
∙normal
∙italic斜体
∙oblique倾斜
font-variant
规定字体变体。
可能的值:
∙normal
∙small-caps小型的大写字母(小写转大写)
font-weight
规定字体的粗细。
可能的值:
∙normal
∙bold
∙bolder
∙lighter
∙100
∙200
∙300
∙400
∙500
∙600
∙700
∙800
∙900
font-size / line-height
规定字号和行高,以像素计。
font-family
规定字体系列。
caption
使用标题控件的字体(比如按钮、下拉列表等)。
icon
使用用于标记图标的字体。
menu
使用用于菜单中的字体(下拉列表和菜单列表)。
message-box
使用用于对话框中的字体。
small-caption
使用用于标记小型控件的字体。
status-bar
使用用于窗口状态栏中的字体。
cxt.fillText("helloword!
",100,100);
cxt.strokeText("helloword!
",100,100);//描边字体
注:
strokeStyle、fillStyle、lineWidth……也都能用于文字
JavaScript语法:
context.fillText(text,x,y,maxWidth);
context.strokeText(text,x,y,maxWidth);
参数值
参数
描述
text
规定在画布上输出的文本。
x
开始绘制文本的x坐标位置(相对于画布)。
y
开始绘制文本的y坐标位置(相对于画布)。
maxWidth
可选。
允许的最大文本宽度,以像素计。
文本对齐
水平调整
textAlign 调整的是文本中心点的位置
默认值:
start
JavaScript语法:
context.textAlign="center|end|left|right|start";
属性值
值
描述
start
默认。
文本在指定的位置开始。
end
文本在指定的位置结束。
center
文本的中心被放置在指定的位置。
left
文本左对齐。
right
文本右对齐。
垂直基线调整
cxt.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
常用值:
top middle bottom
文本度量
cxt.measureText(string).width//返回文本的宽度
注意目前只支持.width
常用属性和方法
cxt.beginPath(); //开始新的路径
cxt.closePath(); //路径闭合
cxt.fillStyle='#f00';
cxt.fill();//填充当前的图像(路径)-------会自动闭合路径
cxt.lineWidth=5;
cxt.strokeStyle='#000';
cxt.stroke();//绘制边框
cxt.clearRect(x,y,WIDTH,HEIGHT); 清除矩形区域的内容
cxt.save();
cxt.restore();
是两个相互匹配出现的,作用是用来保存画布的状态和取出保存的状态的。
渐变和填充
线性渐变
vargrd=cxt.createLinearGradient(x0,y0,x1,y1); 创建线性渐变
grd.addColorStop(0,'#000'); 添加关键颜色取值范围(0~1);
grd.addColorStop(1,'#fff');
cxt.fillStyle=grd;
径向渐变
vargrd=cxt.createRadialGradient(x0,y0,r0,x1,y1,r1); 创建线性渐变
grd.addColorStop(0,'#000'); 添加关键颜色取值范围(0~1);
grd.addColorStop(1,'#fff');
cxt.fillStyle=grd;
对象填充
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
用法:
varimg=document.getElementById("lamp");
varpat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
参数值
参数
描述
image
规定要使用的图片、画布或视频元素。
repeat
默认。
该模式在水平和垂直方向重复。
repeat-x
该模式只在水平方向重复。
repeat-y
该模式只在垂直方向重复。
no-repeat
该模式只显示一次(不重复)。
图形变换
cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);
cxt.scale(2,2);//会对所有数值进行缩放,位置、边框……
1.旋转,缩放,平移等是对整个画布在进行操作,对后面的所有元素会产生影响
2.2个相同的属性会叠加如:
cxt.translate(100,200); …… cxt.translate(100,100);= cxt.translate(200,300);
3.使用变换属性的时候一定要在cxt.save();cxt.restore();之间进行
变换矩阵
cxt.transfrom(a,b,c,d,e,f); ad缩放 bc倾斜 ef平移
注:
多个transfrom会叠加
JavaScript语法:
context.transform(a,b,c,d,e,f);
context.setTransform(a,b,c,d,e,f); 重置并创建新的变换矩阵
参数值
参数
描述
a
水平缩放绘图
b
水平倾斜绘图
c
垂直倾斜绘图
d
垂直缩放绘图
e
水平移动绘图
f
垂直移动绘图
阴影
cxt.shadowColor="rgba(0,0,0,0.5)";
cxt.shadowOffsetX=2;
cxt.shadowOffsetY=2;
cxt.shadowBlur=5; //模糊值
全局透明度
cxt.globalAlpha=0.7;
图形重叠时产生的效果
globalCompositeOperation属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。
源图像=您打算放置到画布上的绘图。
目标图像=您已经放置在画布上的绘图。
默认值:
source-over
JavaScript语法:
context.globalCompositeOperation="source-in";
属性值
值
描述
source-over
默认。
在目标图像上显示源图像。
source-atop
在目标图像顶部显示源图像。
源图像位于目标图像之外的部分是不可见的。
source-in
在目标图像中显示源图像。
只有目标图像内的源图像部分会显示,目标图像是透明的。
source-out
在目标图像之外显示源图像。
只会显示目标图像之外源图像部分,目标图像是透明的。
destination-over
在源图像上方显示目标图像。
destination-atop
在源图像顶部显示目标图像。
源图像之外的目标图像部分不会被显示。
destination-in
在源图像中显示目标图像。
只有源图像内的目标图像部分会被显示,源图像是透明的。
destination-out
在源图像外显示目标图像。
只有源图像外的目标图像部分会被显示,源图像是透明的。
lighter
显示源图像+目标图像。
(√)
copy
显示源图像。
忽略目标图像。
xor
使用异或操作对源图像与目标图像进行组合。
(√)
注:
(√) 能够用于粒子动画
剪辑区域
cxt.clip();用上一个路径剪辑后面绘制的图形
路径方向和剪纸效果
非零环绕原则(与绘制路径的方向有关)
定义一个方向为正1,一个方向为负1,在某一个区域引一条射线
如果与图形路径相交的值为非0则该区域在图形的里面
如果与图形路径相交的值为0则该区域在图形的外面
cxt.isPointInPath(x,y);
给的点在图形里面返回true,否则返回false
注:
cxt.fillRect(),cxt.strokeRect()……永远返回false
注意事项:
1.绘制图形时一定要在cxt.save();cxt.restore();之间绘制,否则一些属性会有全局效果 如:
transform(),clip()……
2.绘制路径之前一定要cxt.beginPath();
3.使用closePath闭合路径能解决用lineTo()闭合路径的几像素空白( cxt.lineCap='square';也可以封闭)
4.绘制描边填充图形的时候,应该先填充图形,在描边,否则描边的宽度会少一半
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- canvas 绘图 基础