Canvas就是画布，可以画任何的线、图形、填充等一系列的操作，有强大的绘图能力。
一、Canvas画形状
<canvas id="xxx" height=...width=...>…</canvas>
id是canvas的标识，height是canvas的高度，单位是像素
Canvas中的坐标系，左上角是（0,0），点是（4,3）
例1-画三角形（通过直线）
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" height=200 width=200>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawtriangle()
{
var c=document.getElementById("myCanvas"); //获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文
ctx.beginPath(); //开始绘图路径
ctx.moveTo(100,0); // 将坐标移至直线起点
ctx.lineTo(50,100); // 绘制直线
ctx.lineTo(150,100); // 绘制直线
ctx.lineTo(100,0); // 绘制直线，回到起点
ctx.stroke(); // 通过线条绘制轮廓
}
window.addEventListener("load", drawtriangle, true);
</script>
</body>
</html>
例2-画菊花图（通过直线）
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" height=1000 width=1000>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawline()
{
var c=document.getElementById("myCanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文
var dx=150;
var dy=150;
var s = 100;
ctx.beginPath(); // 开始绘图路径
var x = Math.sin(0);
var y = Math.cos(0);
var dig=Math.PI/15*11;
for(var i = 0;i<30;i++){
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
//用三角函数计算顶点
ctx.lineTo(dx+x*s,dy+y*s);
}
ctx.closePath(); // 如果不是闭合路径（终点和起点是同一个坐标），就需要这个
ctx.stroke(); // 通过线条绘制轮廓（边框）
}
window.addEventListener("load", drawline, true);
</script>
</body>
</html>
例3-画矩形
可以通过rect()、strokeRect()绘制矩形边框，区别是strokeRect()不需要beginPath()和stroke()即可画图，fillRect()可以指定填充矩形区域，调用clearRect（）可以擦除指定的矩形区域。
<canvas id="myCanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawRect()
{
var c=document.getElementById("myCanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文
//绘制起始点、控制点、终点
ctx.beginPath(); // 开始绘图路径
ctx.rect(20,20, 100, 50); // (x, y, width, height
ctx.stroke(); // 通过线条绘制轮廓（边框）
}
window.addEventListener("load", drawRect, true);
</script>
例4-画圆弧
<canvas id="myCanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
var c=document.getElementById("myCanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文
var radius = 100; // 圆弧的半径
var startingAngle = 0; //圆弧的起始角度
var endingAngle = 2 * Math.PI; //圆弧的结束角度
ctx.beginPath(); // 开始绘图路径
ctx.arc(150, 150, radius, startingAngle, endingAngle, false); //false表示顺时针绘制
ctx.stroke();
}
window.addEventListener("load", draw, true);
</script>二、Canvas描边和填充
1. 描边
扫描二维码关注公众号，回复：
11509722 查看本文章
var c=document.getElementById("XXX");
var ctx=c.getContext("2d");
ctx.lineWidth = 10; //描边宽度为10
ctx.strokeStyle = "red" //描边颜色红色2.填充图形内部
ctx.fillStyle = 'yellow' //填充图形内部的颜色为黄色
ctx.fillRect(65,65,100,100) //矩形的宽度和高度为100，内部填充黄色3.渐变颜色
（1）以线性颜色渐变方式创建CanvasGradient、
creatLinearGradient（xStart,yStart, xEnd, yEnd）
（2）以放射颜色渐变方式创建CanvasGradient (圆）
creatRadialGradient(xStart,yStart, radiusStart, xEnd, yEnd, radiusEnd)
为渐变对象设置颜色
addColorStop(offset,color)
例子：使用黄、绿、红的放射渐变颜色填充一个圆
<canvas id="myCanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
var c=document.getElementById("myCanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文
// 对角线上的渐变
var Colordiagonal = ctx.createRadialGradient(100,100, 0, 100,100, 100);
Colordiagonal.addColorStop(0, "red");
Colordiagonal.addColorStop(0.5, "green");
Colordiagonal.addColorStop(1, "yellow");
var centerX = 100;
var centerY = 100;
var radius = 100;
var startingAngle = 0;
var endingAngle = 2 * Math.PI;
ctx.beginPath(); // 开始绘图路径
ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
ctx.fillStyle = Colordiagonal;
ctx.stroke();
ctx.fill();
}
window.addEventListener("load", draw, true);
</script>
如果要填充透明颜色的，使用rgba（）方法
X.fillStyle = "rgb(255, 0, 0, 0.25)" //红（0-255）、绿、蓝、透明度（0-1）
PS：HTML5的写法要分号；或者不要分号；都可以！