这次记录一下有关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()恢复上一次保存的画布状态;