Canvas(二)
线条：
用canvas画一个大写的字母L，假想我们用笔来画，第一步就是先把笔尖放到画布上- moveTo(x,y)--x,y表示坐标轴没什么可疑问的，接下来画一条直线，直线的方法是lineTo(x,y) -表示上一次停笔点绘制到当前lineTo(100,120)-坐标处,第二个lineTo(),是相对他的上一个停笔点 也就是ctx.lineTo(10,100);
<body>
<canvas width="200" height="200" id="myCanvas"></canvas>
<script>
var c = document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.moveTo(10,10);
ctx.lineTo(10,100);
ctx.lineTo(40,100);
</script>
</body>
但是这是打开浏览器发现什么鸟都没有 ，没有就对了 因为这时还只是规划 是准备画还没有画，要想让它出来得确认绘制。确定绘制只有两种方法，fill()和stroke()，有点绘画基础的应该知道，前者是指填充，后者是指描边。因为我们只是绘制线条，所以只要描边就可以了。调用代码ctx.stroke()即可。
是不是感觉特别丑，那就换个笔
ctx.lineWidth=10; //设置笔的宽度10px
ctx.strokeStyle='red'; //设置笔的颜色
这样就貌似也没有好看多少 ，请原谅一个猴子的审美观
接着来 我们把这个大写的字母L 写三个 分别给它不同的颜色
var c = document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.moveTo(10,10);
ctx.lineTo(10,100);
ctx.lineTo(40,100);
ctx.lineWidth=10;
ctx.strokeStyle='red';
ctx.stroke();
ctx.moveTo(100,10);
ctx.lineTo(100,100);
ctx.lineTo(140,100);
ctx.lineWidth=10;
ctx.strokeStyle='blue';
ctx.stroke();
ctx.moveTo(200,10);
ctx.lineTo(200,100);
ctx.lineTo(300,100);
ctx.lineWidth=10;
ctx.strokeStyle='green';
ctx.stroke();
之后发现是这个样子
三个L是出来了 但是说好的改变颜色呢，艺术家之魂到此为止了么？没救了么？不，还有办法。
使用beginPath()开始绘制。为了让绘制方法不重复绘制，我们可以在每次绘制之前加上beginPath()，代表下次绘制的起始之处为beginPath()之后的代码。我们在三次绘制之前分别加上context.beginPath()
var c = document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(10,100);
ctx.lineTo(40,100);
ctx.lineWidth=10;
ctx.strokeStyle='red';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,10);
ctx.lineTo(100,100);
ctx.lineTo(140,100);
ctx.lineWidth=10;
ctx.strokeStyle='blue';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(200,10);
ctx.lineTo(200,100);
ctx.lineTo(300,100);
ctx.lineWidth=10;
ctx.strokeStyle='green';
ctx.stroke();
</script>
欣赏一毕加索关门弟子的审美观吧！
圆弧：
说完了矩形和线条再来接着说圆弧 arc(x,y,radius,startAngle,endAngle,anticlockwise) 一堆属性看的脑袋仁疼。
x:圆心的x轴坐表
y:圆心的y轴坐标
straAngle:开始角度
endAngle:结束角度
anticlockwise:是否逆时针（true）为逆时针，(false)为顺时针
来个岛国国旗！！！
var c = document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.beginPath();
ctx.arc(100,100,100,0,Math.PI*2,true);
ctx.closePath(); //闭合路径
ctx.fillStyle='red';
ctx.fill()
一些更加复杂的图形就要看你的设计能力 审美眼光 还有数学的功底了 这几样 我是真没有
总结
1、系统默认在绘制第一个路径的开始点为beginPath
2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制
3、每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分
ps：书本的结论是 如果没有closePath那么前面的路劲会保留，实验证明正确的结论是 如果没有重新beginPath那么前面的路劲会保留
ps1：如果你真心凌乱了，那么记住每次画路径都在前后加context.beginPath() 和context.closePath()就行
浙公网安备 33010602011771号