24个canvas基础知识小结


Posted in HTML / CSS onDecember 17, 2014

现把canvas的知识点总结如下,以便随时查阅。

1、填充矩形 fillRect(x,y,width,height);

2、绘制矩形边框 strokeRect(x,y,width,height);

3、擦除矩形 clearRect(x,y,width,height);

4、填充样式 fillStyle="red"; 样式可以为颜色、渐变和图像。

5、描边样式 strokeStyle="red";

6、描边线条的宽度 lineWidth=4;

7、线条末端形状 lineCap="butt"; butt(对接)/round(圆)/square(方),默认情况下是butt;

8、线条相交样式 lineJoin="miter"; miter(尖角)/round(圆角)/bevel(斜角),默认尖角;

9、开始绘制路径 beginPath();

10、结束路径 closePath(); 创建路径后,如果想绘制一条连接到路径起点的线条,可以调用closePath();

11、绘制圆弧 arc(x,y,radius,startAngle,endAngle,true/false);

12、绘制弧线 arcTo(x1,y1,x2,y2,radius) 从上一点开始绘制一天弧线,到x2,y2为止,并且以给定的半径radius穿过x1,y1;

13、moveTO(x,y); 将绘图游标移动到(x,y),不画线

14、lineTo(x,y); 从上一点开始绘制一条直线

15、二次贝塞尔曲线: quadraticCurveTo(cx,cy,x,y); 从上一点开始绘制二次曲线,到x,y为止,cx,cy作为控制点。

16、三次贝塞尔曲线: bezierCurveTo(cx1,cy1,cx2,cy2,x,y); 从上一点开始绘制二次曲线,到x,y为止,cx1,cy1和cx2,cy2作为控制点。

17、rect(x,y,width,height);从点x,y开始绘制矩形,宽度和高度分别由width和height指定。这个方法绘制的是矩形路径,而不是独立形状。

18、绘制文本:

(1) 填充文本:fillText("hello",x,y,width);width为可选的最大像素宽度,如果文本大于最大宽度,则文本会收缩以适应最大宽度。

(2) 文本描边:strokeText("hello",x,y,width);width为可选的最大像素宽度。

(3) 文本样式:font="bold 14px Arial";

(4) 水平文本对齐:textAlign='start'; // start, end, left,right, center。默认值:start。以文字的起始点(x,y)为基点的纵轴进行对齐。

(5) 垂直文本对齐:textBaseline='alphabetic'; //top, hanging, middle,alphabetic, ideographic, bottom。默认值:alphabetic。以文字的起始点(x,y)为基点的横轴进行对齐。

(6) 文本的宽度:var text="hello"; var length=context.measureText(text);参数text为所需要绘制的文字

19、变换

(1) rotate(angle):围绕原点旋转图像angle弧度。
也可以使用transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),0,0);

(2) scale(x,y):缩放图像。也可以使用transform(x,0,0,y,0,0);

(3) translate(x,y):将坐标原点移动到x,y,执行这个变换之后,坐标0,0会变成之前由x,y表示的点。也可以使用transform(1,0,0,1,x,y);

(4) transform(<number>, <number>, <number>,<number>,x, y);

(5) setTransform(<number>, <number>, <number>,<number>,x, y);将变换矩阵重置为默认状态,然后再调用transform();

20、图形组合

复制代码
代码如下:

context.fillStyle="blue";
context.fillRect(10,10,100,100);
context.globalCompositeOperation='lighter'; 可选值如/* */内。
context.fillStyle="red";
context.arc(110,60,50,0,Math.PI*2,false);
context.fill();
/*
source-over(默认值):
destination-over:在原有图形之下绘制新图形
source-in:新图形与原有图形作in运算,只显示新图形中与原有图形相重叠的部分
destination-in:原有图形与新图形作in运算,只显示新图形中与原有图形相重叠的部分
source-out:新图形与原有图形作out运算,只显示新图形中与原有图形不重叠的部分
destination-out:新图形与原有图形作out运算,只显示新图形中与原有图形不重叠的部分
source-atop:只绘制新图形中与原有图形重叠的部分和未被重叠的原有图形
destination-atop:只绘制原有图形中被新图形重叠的部分和新图形的其他部分
lighter:原有图形与新图形均绘制,重叠部分做加色处理
xor:只绘制新图形与原有图形不重叠的部分,重叠部分变透明
copy:只绘制新图形
*/

21、绘制图形阴影

复制代码
代码如下:

context.shadowOffsetX=10; //阴影的横向位移量
context.shadowOffsetY=10; //阴影的纵向位移量
context.shadowColor='rgba(100,100,100,0.5)'; //阴影的颜色
context.shadowBlur=7; //阴影的模糊范围

22、绘制、平铺、裁剪图像

复制代码
代码如下:

context.drawImage(image,x,y);
context.drawImage(image,x,y,w,h);
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);sx,sy和sw,sh为源图像的被复制区域的起始坐标和高度,dx,dy和dw,dh为复制后的区域的目标坐标和高度。
context.createPattern(image,type);图像平铺,参数可以为:no-repeat,repeat-x,repeat-y,repeat;
context.clip(); //裁剪功能

例子:

复制代码
代码如下:

image=new Image(); //创建Image对象
image.src="../images/wukong.gif";
var test=context.createPattern(image,'repeat-y');//createPattern设置平铺效果,
context.fillStyle=test;
context.fillRect(0,0,400,400);
image.onload=function() { //此方法的作用是,如果图片是比较大的网络图像文件,防止图像全部装载完毕才看见该图像,这样就可以一边装载一边绘制了。
drawImg(context,image);
}
function drawImg(context,image){
//绘制原始图像
context.drawImage(image,10,10,125,125);
//局部放大
context.drawImage(image,20,0,90,100,150,10,125,125);
context.rect(20,20,80,80);
context.clip();
context.drawImage(image,0,0,200,200);
}

23、保存、恢复

contex.save();将当前状态保存到栈中。注意:保存的只是对绘制图形的设置和变换,不会保存绘制图形的内容。
context.restore();从栈中取出之前保存的图形状态
可以应用的场合:
(1)图像或图形变形
(2)图像裁剪
(3)改变图形上下文时属性时:fillStyle,font,globalAlpha,globalComposite-Operation,lineCap,lineJoin,lineWidth,miterLimit,shadowBlur,shadowColor,
shadowOffsetX,shadowOffsetY,strokeStyle,textAlign,textBaseline

24、线性渐变

复制代码
代码如下:

var g=context.createLinearGradient(xStart,yStart,xEnd,yEnd);
var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);
g.addColorStop(0,'red');
g.addColorStop(0,'green');
context.fillStyle=g;
context.fillRect(0,0,200,200);
HTML / CSS 相关文章推荐
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 #HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 #HTML / CSS
html5使用canvas绘制一张图片
Dec 15 #HTML / CSS
html5使用canvas画三角形
Dec 15 #HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 #HTML / CSS
html5使用canvas画一条线
Dec 15 #HTML / CSS
html5绘制时钟动画
Dec 15 #HTML / CSS
You might like
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
php控制文件下载速度的方法
2015/03/24 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
键盘KeyCode值列表汇总
2013/11/26 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
python比较两个列表大小的方法
2015/07/11 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
什么是数组名
2012/05/10 面试题
护士见习期自我鉴定
2014/02/08 职场文书
物业保安员岗位职责
2014/03/14 职场文书
《凡卡》教学反思
2014/04/09 职场文书
初中英语课后反思
2014/04/25 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
死者家属慰问信
2015/03/24 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
庭外和解协议书
2016/03/23 职场文书