canvas绘图详解-01-创建与绘制直线和多边形
以下是在慕课网学习此课程的笔记
一、创建canvas
首先要写一个canvas标签，通过js来操作画布。宽高可以直接在标签里以属性写，也可以用js来控制。
<body>
<canvas >
当前浏览器不支持canvas时，请更换浏览器
</canvas>
<script type="text/javascript">
window.onload=function(){
//获取canvas元素
var canvas = document.getElementById('canvas');
//设置canvas的属性
canvas.width = 1200;
canvas.height = 800;
//获取canvas的2d绘图环境
var context = canvas.getContext('2d');
}
</script>
</body>
二、绘制直线和多边形
在canvas里2d的坐标是这样的
下面是绘制一个三角形和一条直线的例子
1、画一个东西你要有绘制路径，就是你要画个什么。
context.moveTo(100,100);//笔尖落在哪 context.lineTo(700,700);//笔尖走到哪
2、还要有绘制状态，就是你画个东西用多粗的线条，什么颜色等等。路径和绘制状态谁先写谁后写都行，一般状态后写。
context.fillStyle="rgb(2,100,30)";//填充颜色 context.lineWidth = 5;//笔水的大小 context.strokeStyle = "red"; //笔的颜色
3、然后是填充绘制，路径需要绘制才能画出来，颜色选了得填充才能画出来。填充和绘制谁先谁后都可以。
context.fill();//填充 context.stroke();//绘制
最好是先填充后绘制，若本本身描边是10px，先绘制后填充，描边会变为5px
4、canvas是基于状态的绘图，在Html5的Canvas中，绘图状态指的就是2d渲染上下文外观的整套属性，包括绘制轮廓颜色，填充颜色，线宽，变换矩阵，裁减区域等。后写的会覆盖前面的
context.fillStyle="rgb(2,100,30)";//填充颜色 context.lineWidth = 5;//笔水的大小 context.strokeStyle = "red"; //笔的颜色
5、路径要有开始和结束，写路径时一定要加上，避免出现不必要的bug
context.beginPath();//开始路径状态，重新规划一下路径 context.closePath();//结束路径状态，结束当前路径，如果是一个未封闭的图形，会自动将首尾相连封闭起来
就像下面的例子，先画一个三角形，后画一个直线，如果没有这两个开始和结束路径做分隔，在画直线的时候，还是会把上面的三角形画一遍，但是画直线的时候改了颜色，再画的三角形就是新的颜色的三角型，把就得三角形给覆盖了。
<script> window.onload=function(){ var canvas = document.getElementById('canvas'); canvas.width = 1024; canvas.height = 768;
//当浏览器不支持canvas的时候，另一种提示方式 if (canvas.getContext('2d')) { var context = canvas.getContext('2d'); //使用context绘制 }else{ alert('当前浏览器不支持canvas，请更换浏览器后再试'); }
//绘制三角形
//绘制路径 context.beginPath();//开始路径状态 context.moveTo(100,100);//笔尖落在哪 context.lineTo(700,700);//笔尖走到哪 context.lineTo(100,700); context.lineTo(100,100); context.closePath();//结束路径状态 //绘制状态 context.fillStyle="rgb(2,100,30)";//填充颜色 context.fill();//填充 context.lineWidth = 5;//笔水的大小 context.strokeStyle = "red"; //笔的颜色 context.stroke();//绘制
//绘制一条直线 context.beginPath(); context.moveTo(200,100); context.lineTo(700,600); context.closePath(); context.strokeStyle = "black"; context.stroke(); } </script>
最后是这样的效果