首页 > 代码库 > 【HTML】canvas学习小结
【HTML】canvas学习小结
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);// 绘制空心字
【HTML】canvas学习小结