canvas
路径的绘制
1、设置笔触点(落笔点)坐标; bi.moveTo(x,y);默认左上角顶点
2、设置笔触点路径(可多条路径); bi.lineTo(x,y);
3、设置笔触颜色; bi.strokeStyle='颜色'
4、笔触绘制; bi.stroke();
若路径是封闭图形
5、设置填充颜色(只是设置不填充); bi.fillStyle='颜色';
6、开始封闭图形颜色填充; bi.fill(); //若不封闭则会自动在起点和终点连线成封闭填充
避免不同canvas相互影响,设置开始和结束
7、开始图形绘制; bi.beginPath();
8、结束图形绘制; bi.closePath();
代码示例:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.canvas{
border:solid 2px black;
}
</style>
</head>
<body>
<canvas width="300px" height="200px" class='canvas'>您的浏览器不支持canvas标签,请变更支持canvas的浏览器</canvas>
<script>
var canvas=document.querySelector(".canvas");
var bi=canvas.getContext('2d');
bi.strokeStyle='orange';
bi.moveTo(10,10);
bi.lineTo(70,70);
bi.lineTo(20,20);
bi.lineTo(35,70);
bi.lineTo(70,70);
// bi.stroke();
bi.fillStyle='pink';
bi.fill();
bi.beginPath();
bi.fillStyle='red';
bi.fillRect(50,50,50,50);
bi.closePath();
// bi.fillStyle='blue';
bi.fillRect(150,50,50,50);
</script>
</body>
</html>
