Canvas学习

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

参考了慕课网课程：炫丽的倒计时效果Canvas绘图与动画基础

感谢 liuyubobobo 老师，提供了这么好的课程

1、<canvas><canvas>标签

注意：最好在标签中指定canvas的width 和 height 或者用js : canvas.width , canvas.height

<canvas>如果你的浏览器支持canvas，那么你将看不到这行文字</canvas>

注意：canvas是基于状态来绘制的。

2、画一条直线：

var canvas = document.getElementById("line"); //获取画布节点
canvas.width =1366; //设置画布的宽
canvas.height =600; //设置画布的高
if(canvas.getContext){
var ctx = line.getContext("2d");
ctx.moveTo(100,100); //移动到位置（100,100）
ctx.lineTo(500,500); //从位置（100.100）画线到位置（500，500）
ctx.lineTo(100,500); //从位置（500,500）画线到位置（100,500）
ctx.lineTo(100,100);
ctx.stroke();
}

效果图：

修改之前的代码如下：

var canvas = document.getElementById("line");
canvas.width =1366;
canvas.height =600;
if(canvas.getContext){
var ctx = line.getContext("2d");
ctx.beginPath();// 开始一段新的画
ctx.moveTo(100,100);
ctx.lineTo(500,500);
ctx.lineTo(100,500);
10 ctx.lineTo(100,100);
11 ctx.fillStyle ="#6699cc"; //设置填充颜色
ctx.fill(); //执行填充操作
ctx.lineWidth =5; //设置线宽
ctx.strokeStyle ="rgba(0,255,0,.5)"; //设置画线的颜色
ctx.stroke(); //画线（会基于之前设置的三个 lineTo的坐标位置而依次画图）
ctx.closePath(); //结束这段画
}

效果如下：