canvas一周一练 -- canvas基础学习 - 张不丢(2)_H5之家

); if(drawing.getContext) { context = drawing.getContext(); context.strokeStyle = ; context.beginPath();//开始绘制新路径 //绘制外圆 context.arc(100, 100, 99, 0, 2*Math.PI, false);//参数依次为圆心坐标x、y、半径、起始角度(用弧度表示)、结束角度、起始角度是否按逆时针方向计算（flase为顺时针） context.moveTo(194, 100);//将绘图游标移动到（x,y）,不画线 //绘制内圆 context.arc(100, 100, 94, 0, 2*Math.PI, false); //绘制分针 context.moveTo(100, 100); context.lineTo(100, 25);//从上一点开始绘制一条直线，到（x,y）为止 //绘制时针 context.moveTo(100, 100); context.lineTo(35, 100); //绘制文本 context.font = ;//表示文本样式、大小、字体 context.textAlign = ;//文本对齐方式（start、end、left、right、center）,建议用start、end代替left、right context.textBaseline = ;//文本的基线(top、hanging、middle、alphabetical、ideopgraphic、bottom) context.fillText(, 100, 20); //描边路径 context.stroke(); //额外练习 context.moveTo(230, 10); //arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到(x2,y2)为止，并以给定的半径穿过（x1,y1） context.arcTo(280, 60, 330, 10, 50); //bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到(x,y)为止，并以(c1x,c1y)(c2x,c2y)为控制点 context.bezierCurveTo(210, 70, 290, 90, 300, 100); context.moveTo(320, 10); //quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并以(cx,cy)为控制点 context.quadraticCurveTo(420, 100, 400, 10); //rect(x,y,width,height):从点(x,y)开始绘制矩形，此方法绘制的是矩形路径而不是独立的形状 context.rect(450, 10, 50, 50); context.stroke(); }

绘制文本

　　fillText()绘制文本 strokeText()为文本描边参数：文本字符串、x坐标、y坐标、可选的最大像素宽度

变换

); if(drawing.getContext) { context = drawing.getContext(); context.strokeStyle = ; context.beginPath(); context.arc(100, 100, 99, 0, 2*Math.PI, false); context.moveTo(194, 100); context.arc(100, 100, 94, 0, 2*Math.PI, false); //变换原点 context.translate(100, 100);//将坐标原点移动到该点 //旋转表针 context.rotate(1);//围绕原点旋转图像angle弧度 //绘制分针 context.moveTo(0, 0); context.lineTo(0, -80); //绘制时针 context.moveTo(0, 0); context.lineTo(-65, 0); context.stroke(); context.rotate(-1); context.fillStyle = ; context.save();//保存上下文状态，只保存绘图上下文的设置和变换，不会保存绘图上下文的内容 context.fillStyle = ; context.translate(-100, -100); context.save(); context.fillStyle = ; context.fillRect(220, 10, 50, 50); context.restore();//返回之前保存的设置 context.fillRect(280, 10, 50, 50); context.restore(); context.fillRect(340, 10, 50, 50); }

绘制图像

　　drawImage()还可传入<canvas>元素作为第一个参数，表示把另一个画布内容绘制到当前画布上。

　　可能遇到的问题：drawImage()图片不显示在画布上，原因可能是你取图片的时候，此时图片还没有加载出来