canvas绘制弧形,

　　在旋转之前，你必须明白一句话：旋转的是画布的坐标系，而不是图形本身。好了，理解了这句话，下一步就很简单了。

　　先知道画圆的坐标：复制代码如下：

　　脚本语言=javascript

　　var cxt=document . getelementbyid( demo )。get context( 2d )；

　　cxt . begin path()；

　　cxt.arc(100，100，50，数学。PI*0.75，数学。PI*1.75，假)；/*画一个圆心坐标为100，100的半圆弧；起始弧度为0.75，结束弧度为1.75，最后一个参数False=顺时针，true=逆时针。当然，这个参数是可选的*/

　　cxt.fillStyle= # F00/*选择要使用的颜色*/

　　cxt . fill()；/*一步真正在画布上画图形，先画半圆*/

　　/*用同样的方法画第二个半圆*/

　　cxt . begin path()；

　　cxt.arc(170，100，50，数学。圆周率*1.25，数学。PI*0.25，假)；

　　cxt.fillStyle= # F00

　　cxt . fill()；/*在画布上绘制绘制的图形*/

　　cxt . begin path()；

　　/*将画布顺时针旋转45度。旋转函数的参数是弧度，需要转换*/

　　cxt . rotate(45 *数学。PI/180)；

　　cxt.fillRect(141.1，-50，100，100)；/*起始坐标是141.1，-50，宽度和高度都是100*/

　　cxt.fillStyle= # F00

　　cxt . fill()；

　　cxt . begin path()；

　　/*将画布旋转到正常角度*/

　　cxt.rotate(-45*Math。PI/180)；

　　Cxt.font=60px微软雅黑；

　　cxt.strokeStyle= # f00

　　Cxt.strokeText(我爱html5 ，0，300)；/*两个参数，第一个是开始绘制文本的X轴坐标，第二个是开始绘制文本的Y轴坐标*/

　　cxt . stroke()；

　　/*创建渐变*/

　　var grd=cxt . createlanegradient(0，45，175，50)；/*这四个参数是渐变起点X，y渐变终点X，y*/

　　grd.addColorStop(0， # ff 0000 )；

　　grd.addColorStop(0.25， # ffff 00 )；

　　grd.addColorStop(0.5， 00ff 00 )；

　　grd.addColorStop(0.75， # 00 ffff )；

　　grd.addColorStop(1， # ffff 00 )；

　　cxt.strokeStyle=grd

　　Cxt.strokeText(我爱画布，0，400)；/*两个参数，第一个是开始绘制文本的X轴坐标，第二个是开始绘制文本的Y轴坐标*/

　　cxt . stroke()；

　　/脚本

　　效果图：

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。