效果如图:
1、html
<div>
<canvas id="myCanvas" width="600" height="200" style="border: 1px solid #ccc;">
您的浏览器不支持canvas,请升级浏览器
</canvas>
</div>
2.js
window.onload = function () {
var cav = document.getElementById('myCanvas'); //获取canvas元素
var ctx = cav.getContext('2d'); //获取cav上下文,创建ctx对象,以获取允许进行绘制的2d环境
ctx.fillStyle = '#f60'; //颜色填充
ctx.fillRect(0,0,100,100);
//绘制直线
/*beginPath()定义了一个新的路径绘制动作的开始
moveTo()为指定点创建了一个新的子路径,这个点就变成了新的上下文的点
lineTo()以上下文点为起点,到方法参数中指定的点之间画一条直线。
stroke()为所画的线赋予颜色,并使其可见,如果没有特别指定的颜色的话,则默认使用黑色画直线*/
ctx.beginPath();
ctx.moveTo(130,50);
ctx.lineTo(200,50);
ctx.lineWidth = 20; //线的宽度
ctx.strokeStyle = '#ff0000'; //线的颜色
ctx.lineCap='round'; //线的两头圆滑
ctx.stroke();
//绘制弧线和曲线
/*arcTo()在画布上创建介于两个切线之间的弧/曲线
quadraticCurveTo()绘制二次曲线,每条二次曲线要由上下文点、一个控制点和一个终止点来定义
bezierCurveTo()绘制贝塞尔曲线,每条贝塞尔曲线要由上下文点、两个控制点和一个终止点来确定。由于贝塞尔曲线
有两个控制点,因此比二次曲线更加的复杂多变*/
//绘制弧线
ctx.beginPath();
ctx.moveTo(200,100);
ctx.lineTo(300,100);
ctx.arcTo(350,100,350,130,50);
ctx.lineTo(350,170);
ctx.stroke();
//绘制二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(200,50);
ctx.quadraticCurveTo(280,0,380,150);
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.stroke();
//绘制三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(400,100);
ctx.bezierCurveTo(280,10,500,10,580,170);
ctx.lineWidth = 5;
ctx.strokeStyle = '#0ff';
ctx.stroke();
//复杂路径
ctx.beginPath();
ctx.moveTo(120,30);
//第一条直线
ctx.lineTo(220,160);
//二次曲线
ctx.quadraticCurveTo(250,200,270,120);
//贝尔塞尔曲线
ctx.bezierCurveTo(300,-40,330,200,400,150);
//第二条直线
ctx.lineTo(500,90);
ctx.lineWidth = 5;
ctx.strokeStyle = '#333';
ctx.stroke();
};