<canvas id="canvas" width="200" height="100"></canvas>
1, 用canvas画线
window.onload = function() {
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext('2d')
ctx.moveTo(0, 0) //起点
ctx.lineTo(20, 20) //终点
ctx.lineWidth = "2" //线宽
ctx.strokeStyle = "red"; //线的颜色
ctx.stroke(); //结束
}
2, 用canvas画圆形
window.onload = function() {
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext('2d')
ctx.strokeStyle = "red";//线的颜色
ctx.arc(200, 200, 100,1, 1*Math.PI) //s画圆形
ctx.stroke();
}
3,用canvas 画矩形
window.onload = function() {
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext('2d')
ctx.strokeStyle = "red";
ctx.fillRect(20,20,300,300) //填充矩形
ctx.rect(20,20,300,300)//画矩形
ctx.stroke();
}