详解HTML5 canvas画图根基行使要领

其它一个跟图形调动相干的是：矩阵调动 ：context.transform(a, b, c, d, e, f, g)。参数的寄义如下：
a 程度缩放 ( 默以为1 )
b 程度倾斜 ( 默以为 0 )
c 垂直倾斜 ( 默以为 0 )
d 垂直缩放 ( 默以为1 )
e 程度位移 ( 默以为 0 )
f 垂直位移 ( 默以为 0 )
读者可以自行验证其各个参数的结果，这里就纷歧一先容了。

绘制曲线

跟绘制曲线的有四个函数，别离是：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);用于建设弧/曲线（用于建设圆或部门圆）。吸取的参数寄义：
| 参数 | 寄义 |
| :————- |:————-|
| x | 圆的中心的 x 坐标 |
|y|圆的中心的 y 坐标|
|r|圆的半径|
|sAngle|起始角，以弧度计（弧的圆形的三点钟位置是 0 度）|
|eAngle|竣事角，以弧度计|
|counterclockwise|可选。划定应该逆时针照旧顺时针画图。False = 顺时针，true = 逆时针|

下面是几个arc()函数的几个示例：

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.strokeStyle = "#F22D0D"; context.lineWidth = "2"; //绘制圆 context.beginPath(); context.arc(100,100,40,0,2*Math.PI); context.stroke(); //绘制半圆 context.beginPath(); context.arc(200,100,40,0,Math.PI); context.stroke(); //绘制半圆,逆时针 context.beginPath(); context.arc(300,100,40,0,Math.PI,true); context.stroke(); //绘制关闭半圆 context.beginPath(); context.arc(400,100,40,0,Math.PI); context.closePath(); context.stroke();

结果如下：

context.arcTo(x1,y1,x2,y2,r); 在画布上建设介于两个切线之间的弧/曲线。吸取的参数寄义：

参数 寄义
x1   弧的节制点的 x 坐标  
y1   弧的节制点的 y 坐标  
x2   弧的终点的 x 坐标  
y2   弧的终点的 y 坐标  
r   弧的半径  

这里必要留意的是arcTo函数绘制的曲线的起始点必要通过moveTo(）函数来配置，下面操作arcTo函数绘制一个圆角矩形：

function createRoundRect(context , x1 , y1 , width , height , radius) { // 移动到左上角 context.moveTo(x1 + radius , y1); // 添加一条毗连到右上角的线段 context.lineTo(x1 + width - radius, y1); // 添加一段圆弧 context.arcTo(x1 + width , y1, x1 + width, y1 + radius, radius); // 添加一条毗连到右下角的线段 context.lineTo(x1 + width, y1 + height - radius); // 添加一段圆弧 context.arcTo(x1 + width, y1 + height , x1 + width - radius, y1 + height , radius); // 添加一条毗连到左下角的线段 context.lineTo(x1 + radius, y1 + height); // 添加一段圆弧 context.arcTo(x1, y1 + height , x1 , y1 + height - radius , radius); // 添加一条毗连到左上角的线段 context.lineTo(x1 , y1 + radius); // 添加一段圆弧 context.arcTo(x1 , y1 , x1 + radius , y1 , radius); context.closePath(); } // 获取canvas元素对应的DOM工具 var canvas = document.getElementById('mc'); // 获取在canvas上画图的CanvasRenderingContext2D工具 var context = canvas.getContext('2d'); context.lineWidth = 3; context.strokeStyle = "#F9230B"; createRoundRect(context , 30 , 30 , 400 , 200 , 50); context.stroke();

结果如下：

context.quadraticCurveTo(cpx,cpy,x,y);绘制二次贝塞曲线，参数寄义如下：

  参数 寄义
cpx   贝塞尔节制点的 x 坐标  
cpy   贝塞尔节制点的 y 坐标  
x   竣事点的 x 坐标  
y   竣事点的 y 坐标  

曲线的开始点是当前路径中最后一个点。假如路径不存在，那么请行使 beginPath() 和 moveTo() 要领来界说开始点。

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 绘制三次贝塞尔曲线，参数如下：

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!