当前位置: 首页 > 互联网 > 正文

《HTML5揭秘》笔记二(Canvas)

实现富应用最重要的新工具就是Canvas,与其它HTML元素相比,“canvas”独特的地方是需要Javascript来操作。不使用JavaScript就无法绘制图形,也不能画出图画。这也就意味着“canvas”是一个编程的工具。从标记和角度看,它简单明了,只要给它指定三个属性即可:id,width和height。

[code lang=”html”]
<canvas id="drawingCanvas" width="500px" height="300px"></canvas>
[/code]

操作Canvas的相关javascript代码:

[code lang=”javascript”]
window.onload=function(){
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");

context.moveTo(10,10);
context.lineTo(400,40);
context.stroke(); //画一条线
}
[/code]

设置线条的其它属性:lineWidth(宽度),strokeStyle(颜色),lineCap(线头类型:butt,round,square)

context.beginPath()方法会开启一个新线段的绘制,如果没有这一步,那么每次调用stroke()方法,都会把画布上原有的线段再重新绘制一遍。

需要用context.closePath()方法来关闭路径,设置fillStyl颜色式属性,用context.fill()方法来填充设置的颜色。最好是先填充颜色,再绘制其轮廓:

[code lang=”javascript”]
window.onload=function(){
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(10,120);
context.lineTo(300,180);
context.lineTo(180,250);
context.lineTo(10,120);

context.closePath();
context.fillStyle="yellow";
context.fill();

context.lineWidth=5;
context.strokeStyle = "red";
context.lineCap = "butt";
context.stroke();
}
[/code]

提供绘制矩形方法:context.fillRect(x1,y1,x2,y2);绘制矩形框方法:strokeRect(x1,y1,x2,y2)。其线条宽度与颜色的设置方法与上面一致。

绘制曲线:context.arc(centerX, centerY, radius, startingAngle, endingAngle);贝塞尔曲线:context.bezierCurveTo(control1_x, control1_y, control2_x, control2_y, endPointX, endPointY);

图片的变换,移动坐标系:context.translate(x, y); 坐标系旋转:context.rotate(x);示例代码:

[code lang=”javascript”]
window.onload=function(){
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");

context.translate(100,100);

var copies = 10;
for(var i=0; i<copies; i++)
{
context.rotate(2 * Math.PI * 1/(copies -1));
context.rect(0,0,50,50);
}
context.strokeStyle="red";
context.stroke();
}
[/code]

图像的透明度,设置alpha:设置strokeStyle或fillStyle样式:”rgba(100,150,185,0.5)”。也可设置全局透明属性:context.globalAlpha=0.5;

将画布保存为图像:canvas.toDataURL();示例代码:

Canvas绘制图像:context.drawImage(img, 10, 10);

[code lang=”javascript”]
var canvas;
window.onload=function(){
canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");

var img = new Image();
img.onload = function(){
context.drawImage(img, 10, 10);
};
img.src="20140418093805407.jpg";
}
[/code]

drawImage参数个数的不同有不同的绘图意义:缩放图片:drawImage(img, x1, y1, x2, y2);裁剪图片:drawImage(img, source_x, source_y, source_width, source_height, x, y, width, height);

绘制文本方法:fillText(text, x1, y1);绘制文本轮廓:fillStroke(text, x1, y1);示例代码:

[code lang=”javascript”]
var canvas;
window.onload=function(){
canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");

context.font = "bold 20px Arial";
context.textBaseline = "top";
context.fillStyle = "black";
context.fillText("Hello world, I love Javascript!", 10, 10);

context.font = "bold 30px Arial";
context.lineWidth = "1";
context.strokeStyle = "red";
context.strokeText("I come from the Eastern Park!",10,40);
}
[/code]

阴影与填充:几个相关属性:shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。填充图案:var pattern = context.createPattern(img,”repeat”);也可以是单横向填充:repeat-x,单垂直填充:repeat-y。再将pattern值赋值给fillStyle或strokeStyle进行Canvas绘制即可。

小结:注意beginPath与closePath的正确使用。绘图程序需要一定的数学知识,在绘图之前可能需要进行一些数学计算。

本文固定链接: http://www.byhard.com/?p=1345 | 海纳百川

该日志由 byhard 于2015年04月14日发表在 互联网 分类下,
原创文章转载请注明: 《HTML5揭秘》笔记二(Canvas) | 海纳百川
关键字: ,

报歉!评论已关闭.