1.canvas绘制步骤
①在HTML5页面中添加canvas元素,定义id属性值以接下来调用。
<canvas id="myCanvas" width="600" heigth="400"></canvas>
②使用id寻找页面中的canvas元素
var c=document.getElementById("myCanvas");
③通过canvas元素的getContext方法来获取其上下文,即创建context对象,以获取允许进行绘制的2D环境
var context=c.getContext("2d");
④使用js脚本来进行绘制
context.fillStyle="#f00";
context.fillRect(50,25,100,50);
2.绘制直线
(1)canvas绘制直线相关方法
开始:beginPath() 定义了一个新的路径绘制动作的开始
起点:moveTo()
终点: lineTo()
绘制: stroke() 为所画的线条赋颜色
(2)绘制直线相关属性
直线宽度:linewidth 直线颜色:strokeStyle
直线端点样式(线帽):linecap,属性值为(butt,round,square)
3.绘制弧线和曲线
arcTo() 创建介于两个切线之间的弧/曲线
quadraticCurveTo() 二次贝塞尔曲线
bezierCurveTo() 三次贝塞尔曲线
4.线条的连接样式
lineJoin属性,属性值为(miter,round,bevel)
5.canvas绘制简单图形
矩形:rect() ,由左上角坐标(x,y)和矩形的宽高(width,height)确定。
圆:arc() ,起始角度0,终点2*PI
图形颜色填充:fillStyle设置颜色,使用fill()完成填充。
6.绘制阴影
阴影颜色:shadowColor 阴影模糊度:shadowBlur
阴影与形状的水平距离:shadowOffsetX 阴影与形状的垂直距离:shadowOffsetY
透明度:globalAlpha:0.0(完全透明)~1.0(完全不透明)
7.绘制渐变
①线性渐变
创建对象:var grad=context.createLinearGradient(x1,y1,x2,y2);(起点终点)
上色:addColorStop();
②径向渐变:var grad=context.createRadialGradient(x1,y1,r1,x2,y2,r2);(圆心半径1,圆心半径2)
8.绘制图案填充
context.createPattern(image,type);
type表示平铺类型:repeat /repeat-x /repeat-y /no-repeat
9.绘制图像
原始:context.drawImage(image Obj,x,y);
指定:context.drawImage(image Obj,x,y,width,height);
裁剪:context.drawImage(image Obj,sx,sy,sw,sh,dx,dy,dw,dh);
10.绘制文本
①context.fillText(text,x1,y1);
②设置字体大小样式
fond:normal/italic/bold
fillStyle(颜色)
strokeText() (文本边缘)
③绘制文本对齐
textAlign属性:start/end/left/right/center
④文本度量
measureText()
11.图形的变换
1 var canvas = document.getElementById("mycanvas"); 2 var context = canvas.getContext("2d"); 3 var rectWidth=150; 4 var rectHeight=75; 5 context.fillStyle="#ff0000"; 6 //把坐标原点移动到canvas中心点 7 context.translate(canvas.width/2,canvas.height/2); 8 //顺时针旋转45° 9 context.rotate(0.25*Math.PI); 10 //纵坐标向上缩小一半 11 context.scale(1,0.5); 12 context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);
结果如下:
12.图形的组合
1 var canvas = document.getElementById("mycanvas"); 2 var context = canvas.getContext("2d"); 3 //绘制矩形 4 context.beginPath(); 5 context.rect(200,20,100,100); 6 context.fillStyle="blue"; 7 context.fill(); 8 9 //context.globalCompositeOperation = "source-over";//目标图像上显示源图像 10 //context.globalCompositeOperation = "source-atop";//只绘制目标图像和新图形与目标图像重叠部分, 11 // 新图形在原有图形之上 12 //context.globalCompositeOperation = "source-in";//新图像在目标图像之内显示,目标图像是透明的 13 //context.globalCompositeOperation = "source-out";//之外显示,目标图像是透明的 14 context.globalCompositeOperation = "destination-atop";//只绘制目标图像和新图形与目标图像重叠部分, 15 // 新图形在原有图形下层 16 //context.globalCompositeOperation = "destination-in"; 17 //context.globalCompositeOperation = "destination-out"; 18 //context.globalCompositeOperation = "destination-over"; 19 // context.globalCompositeOperation = "lighter";//显示源图像+目标图像,两图形重叠部分加色处理 20 //context.globalCompositeOperation = "darker";//两图形重叠部分减色处理 21 //context.globalCompositeOperation = "xor";//重叠部分透明 22 //context.globalCompositeOperation = "copy";//只显示源图像 23 24 //绘制圆 25 context.beginPath(); 26 context.arc(320,120,60,0,2*Math.PI); 27 context.fillStyle="red"; 28 context.fill(); 29
结果如下:
13.图形的裁切
使用clip()方法