canvas 标签

canvas 笔记(1)

By hiluluke on

初步

首先需要在html中定义html结构

1
<canvas id="mycanvas" width="600" height="300"></canvas>

然后需要在js上获取canvas和定义动画类型

1
2
var canvas = document.getElementById("mycanvas"); //获取canvas
var context = canvas.getContext("2d");//定义2d动画

然后就可以进行一些绘图操作:

1
2
3
4
5
context.lineWidth = 10;定义线条宽度
context.strokeStyle = "blue";//定义线条样式(颜色)
context.moveTo(50, canvas.height);移动光标
contex.lineTo(x,y)//从光标的位置画一条线到(x,y)
context.stroke()绘图