【HTML】canvas学习小结

浏览数：41 / 时间：2015年06月09日

1. 绘制基本图形

1.1 绘制线

canvas.getContext(‘2d‘) 获取上下文

ctx.beginPath()　　开始绘制新路径

ctx.closePath()　　结束当前路径

ctx.save()　　保存当前上下文

ctx.restore()　　恢复至上次保存的上下文

ctx.moveTo(x,y)　　移动绘制点至x,y

ctx.lineTo(x,y)　　从当前点绘制到x,y的线

ctx.lineWidth　　设置线的宽度

ctx.strokeStyle　　设置线的颜色

ctx.fill()　　填充图形

ctx.stroke()　　绘制图形，一般填充在绘制前面，避免填充遮挡宽度

var canvas = document.getElementById(‘myCanvas‘);

if (canvas.getContext) {
    var ctx = canvas.getContext(‘2d‘);
}

ctx.beginPath(); // 开始路径绘制
ctx.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
ctx.lineTo(200, 20); // 绘制一条到(200,20)的直线
ctx.lineWidth = 1.0; // 设置线宽
ctx.strokeStyle = "#CC0000"; // 设置线的颜色
ctx.stroke(); // 绘制矩形

1.2 绘制矩形

ctx.fillRect(x1, y1, x2, y2);　　绘制左上角坐标x1,y1 右下角坐标x2,y2的矩形

ctx.fillStyle　　矩形填充颜色

var canvas = document.getElementById(‘myCanvas‘);

if (canvas.getContext) {
    var ctx = canvas.getContext(‘2d‘);
}

ctx.fillStyle = ‘yellow‘;//设置实心颜色
ctx.fillRect(50, 50, 200, 100);//绘制实心矩形

ctx.fill();//填充矩形
ctx.stroke();//绘制矩形

ctx.strokeRect(10,10,200,100);//绘制空心矩形 
ctx.clearRect(100,50,50,50);//清除某个矩形区域的内容

1.3 绘制圆形&扇形

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);　　x和y参数是圆心坐标，radius是半径，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）

var canvas = document.getElementById(‘myCanvas‘);

if (canvas.getContext) {
    var ctx = canvas.getContext(‘2d‘);
}

//实心圆
ctx.beginPath(); 
ctx.arc(60, 60, 50, 0, Math.PI*2, true); 
ctx.fillStyle = "#000000"; 
ctx.fill();
ctx.stroke();

//空心圆
ctx.beginPath(); 
ctx.arc(60, 60, 50, 0, Math.PI*2, true); 
ctx.lineWidth = 1.0; 
ctx.strokeStyle = "#000"; 
ctx.stroke();

1.4 绘制五角星

1.5 绘制渐变色

createLinearGradient（x1,y1,x2,y2）　　绘制从x1,y1起始，x2,y2终止的线性渐变，例如（0,0,0,100）从上至下的线性渐变，（0,0,100,0）从左至右

var canvas = document.getElementById(‘myCanvas‘);

if (canvas.getContext) {
    var ctx = canvas.getContext(‘2d‘);
}

var myGradient = ctx.createLinearGradient(0, 0, 0, 160); //从上至下的线性渐变

myGradient.addColorStop(0, "#BABABA"); 
myGradient.addColorStop(1, "#636363");

ctx.fillStyle = myGradient;
ctx.fillRect(10,10,200,100);

1.6 阴影

var canvas = document.getElementById(‘myCanvas‘);

if (canvas.getContext) {
    var ctx = canvas.getContext(‘2d‘);
}

ctx.shadowOffsetX = 10; // 设置水平位移
ctx.shadowOffsetY = 10; // 设置垂直位移
ctx.shadowBlur = 5; // 设置模糊度
ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色

ctx.fillStyle = "#CC0000"; 
ctx.fillRect(10,10,200,100);

1.7 绘制文本

var canvas = document.getElementById(‘myCanvas‘);

if (canvas.getContext) {
    var ctx = canvas.getContext(‘2d‘);
}

ctx.font = "Bold 20px Arial"; // 设置字体
ctx.textAlign = "left";// 设置对齐方式
ctx.fillStyle = "#008600"; // 设置填充颜色
ctx.fillText("Hello!", 10, 50); // 设置字体内容，以及在画布上的位置
ctx.strokeText("Hello!", 10, 100);// 绘制空心字