HTML5 Canvas(1) 绘制基本图形和线条


复制代码
        window.onload = function () {
//得到2D渲染上下文
var context = document.getElementById("myCanvas").getContext("2d");
//填充一个矩形
var x = 40, y = 40;
context.fillStyle
= "blue"; //设置填充色
context.fillRect(x + 5, y + 5, 40, 90);

//绘制一个矩形边框
context.strokeStyle = "red"; //设置画笔色
context.strokeRect(x, y, 50, 100);


context.beginPath();
//beginPath1
context.moveTo(10, 10);
context.lineTo(
150, 50);
context.lineTo(
140, 33);
context.strokeStyle
= "green";
context.stroke();

context.beginPath();
//beginPath2
context.moveTo(22, 22);
context.lineTo(
10, 50);
context.lineTo(
30, 100);
context.closePath();
//closePath可以让线条闭合
context.strokeStyle = "#0000FF";

context.fill();
//填充线条轮廓区域

};
复制代码

beginPath的作用是开辟新的绘图路径,不会影响其他路径,如把beginPath2注释掉后,运行会出现2个封闭被#0000FF填充的三角形,即使在beginPath1中使用stroke画出了线条,也会被重绘。

所以一般要画和之前的线条不一样的设置时首先要用beginPath开辟新绘图路径再继续画,才不会影响先前的绘图

智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告