// Ready
var elem = document.getElementById("myCanvas");
var context = elem.getContext('2d');
var context = elem.getContext('2d');
//2D context API----线条
context.fillStyle = '#00f'; //填充色
context.strokeStyle = '#f00'; //边框色
context.moveTo(x,y) //移动坐标原点
context.fillRect(x,y,width,height); //绘制带填充的矩形
context.strokeRect(x,y,width,height); //绘制只有边框的矩形
context.clearRect(x,y,width,height); //清除部分canvas
context.lineWidth = 4 ; //边框线
context.fill();
context.stroke();
注意:原点坐标不变,从当前点到下一个点画线
//2D context API----路径
context.beginPath();
context.moveTo(x,y);
context.lineTo(x,y);
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
context..arc(x,y,radius,start angle,end angle,anticlockwise[false]);
context.closePath();
//2D context API----图像
var img = new Image();
img.src = "img.gif";
context.drawImage(img,x,y,w,h,
context.drawImage(this, 0, 0); //设置坐标,大小不变
context.drawImage(this, 160, 0, 120, 70); //重设大小
context.drawImage(this, 8, 20, 140, 50, 0, 150, 350, 70); //切割并重设大小
//2D context API----像素级操作
createImageData;
getImageData;
putImageData;
//2D context API----文字
设置属性
font;
font-family;
textAlign;
textBaseline;
绘制文字
fillText("hello",0,0);
strokeText("hello",0,50);
//2D context API----阴影
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4; //模糊程度
context.shadowColor = 'rgba(255, 0, 0, 0.5)';
context.fillStyle = '#00f';
context.fillRect(20, 20, 150, 100);
context.shadowOffsetY = 5;
context.shadowBlur = 4; //模糊程度
context.shadowColor = 'rgba(255, 0, 0, 0.5)';
context.fillStyle = '#00f';
context.fillRect(20, 20, 150, 100);
//2D context API----颜色渐变
context.createLinearGradient(0, 0, elem.width, 0);