canvas绘图调用方法

来源：互联网发布：知乎可怕编辑：程序博客网时间：2024/06/06 01:16

这次记录一下有关canvas中一些方法的调用，从在画布当中绘制出自己的图像。

首先调用绘图画布的方法getContext(context)来绘制图形。context的属性值一般为2d。

绘制图形中，有两种形式，一种是线条型，另一种是填充型。分别采用的属性为：strokeStyle(x,y,width,height)、fillStyle(x,y,width,height).

例：绘制出两个不同类型的矩形。

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <title style="text-align:center">canvas绘制图像</title> </head> <body> <div id="canvasbox"><canvas id="canvas" width="500" height="300">你的浏览器不兼容canvas动画</canvas></div><script>function initiate(){var ele = document.getElementById("canvas");canvas = ele.getContext("2d");canvas.strokeRect(100,100,120,120);canvas.fillRect(110,110,100,100);canvas.clearRect(120,120,80,80);}window.addEventListener("load",initiate,false);</script> </body></html>

得到了绘制的图形如下：

这里面还调用了clearRect()方法绘制出不含像素的矩形。也可以通过调用一定的方法从而改变图形的颜色。这里可以用strokeStyle、fillStyle来改变颜色。具体的属性赋值为canvas.strokeStyle=color。而用globalAlpha来改变画布中所有图形的透明度。

在绘制渐变线时，可以用createLinear Gradient(x1,y1,x2,y2)线性渐变，createRadialGradient(x1,y1,r1,x2,y2,r2)，配合addColorStop(position,color)设置渐变效果。其中position的值0.0~1.0。(这里的渐变效果还是没懂，希望查找资料之后能改进)

function initiate(){var ele = document.getElementById("canvas");canvas = ele.getContext("2d");var grad = canvas.createLinearGradient(0,0,10,100);grad.addColorStop(0.5,'#00f');grad.addColorStop(1,'#000');canvas.fillStyle = grad;canvas.fillRect(10,10,100,100);canvas.fillRect(120,10,200,100);}window.addEventListener("load",initiate,false);

在画布中可以创建画笔的路径，从而清晰确定画笔的移动路线。

在创建之前，必须调用beginPath()方法创建路径。

closePath()为关闭路径，将最后一个点与原点通过直线连接。在需要保持开放路径，即不需要图形闭合时不需要调用此方法。还有一种情况不需要调用关闭路径方法，绘制图形时，采用的是fill()填充方法，不需要进行最后的连接。

fill()和stroke()可以在画布上绘制路径，也就是对线条进行喷墨显示。

在创建图形中用到的方法有：moveTo(x,y)、lineTo(x,y)、rect(x,y,width,height)、arc(x,y,startAngle,endAngle,direction)。

moveTo()方法是将画笔移动动到指定位置；

lineTo()即画笔初始点到位置用直线连接；

canvas中还可以修改线型。lineWidth、lineCap分别设置线宽及线条端点形状；

转换函数，即改变并设置新的原点translate(x,y)。

rotate(angle)以原点为中心进行旋转；

scale(x,y)放大或者缩小画布；

save()保存画布状态；

restore()恢复上一次保存的画布状态；

0 0