UDN-企业互联网技术人气社区

板块导航

浏览  : 1419
回复  : 1

[HTML5] 24个canvas基础知识小结

[复制链接]
genie1003的头像 楼主
发表于 2015-7-12 08:45:40 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了24个canvas基础知识小结,非常全面详尽,推荐给大家。

  现把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、图形组合
  1. context.fillStyle="blue";
  2. context.fillRect(10,10,100,100);
  3. context.globalCompositeOperation='lighter'; 可选值如/* */内。
  4. context.fillStyle="red";
  5. context.arc(110,60,50,0,Math.PI*2,false);
  6. context.fill();
  7. /*
  8. source-over(默认值):
  9. destination-over:在原有图形之下绘制新图形
  10. source-in:新图形与原有图形作in运算,只显示新图形中与原有图形相重叠的部分
  11. destination-in:原有图形与新图形作in运算,只显示新图形中与原有图形相重叠的部分
  12. source-out:新图形与原有图形作out运算,只显示新图形中与原有图形不重叠的部分
  13. destination-out:新图形与原有图形作out运算,只显示新图形中与原有图形不重叠的部分
  14. source-atop:只绘制新图形中与原有图形重叠的部分和未被重叠的原有图形
  15. destination-atop:只绘制原有图形中被新图形重叠的部分和新图形的其他部分
  16. lighter:原有图形与新图形均绘制,重叠部分做加色处理
  17. xor:只绘制新图形与原有图形不重叠的部分,重叠部分变透明
  18. copy:只绘制新图形
  19. */
复制代码

  21、绘制图形阴影
  1. context.shadowOffsetX=10; //阴影的横向位移量
  2. context.shadowOffsetY=10; //阴影的纵向位移量
  3. context.shadowColor='rgba(100,100,100,0.5)'; //阴影的颜色
  4. context.shadowBlur=7; //阴影的模糊范围
复制代码

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

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

  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、线性渐变
  1. var g=context.createLinearGradient(xStart,yStart,xEnd,yEnd);
  2. var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);
  3. g.addColorStop(0,'red');
  4. g.addColorStop(0,'green');
  5. context.fillStyle=g;
  6. context.fillRect(0,0,200,200);
复制代码




相关帖子

发表于 2015-8-10 16:52:52 | 显示全部楼层
html5的时代快要到来了么
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部