当没有设置宽度和高度的时候,canvas会初始化宽度为300像素和高度为150像素;该元素可以使用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲。故单纯的扩展画布可以写在行内
例:<canvas id="can" width="500" height="500"></canvas>
先设置颜色,后绘制图形
var ctx = canvas.getContext(‘2d’); \\创建2D渲染区域
ctx.fillStyle = “rgb(200,0,0)”; \\设置填充色ctx.fillRect (x, y, width, height); \\绘制图形
绘制矩形
fillRect(x, y, width, height) \\绘制一个填充的矩形
strokeRect(x, y, width, height)\\绘制一个一个矩形的边框
clearRect(x, y, width, height)\\清除指定矩形区域,让清除部分完全透明
绘制路径
beginPath()新建路径
moveTo()落笔点
lineTo()结束点
stroke()用线条绘制轮廓
closePath()闭合路径
fill()填充
lineCap设置或返回线条的结束端点样式(butt;round;square)
lineJoin设置或返回两条线相交时,所创建的拐角类型(bevel-斜角;round; miter-尖角)
lineWidth设置或返回当前的线条宽度
例:
<body>
<canvas id="can" height="500" width="500">
你的浏览器不支持canvas
</canvas>
</body>
<script>
var can=document.getElementById("can");
var ctx=can.getContext("2d");
ctx.fillRect(0,0,100,100);
ctx.clearRect(25,25,50,50);
ctx.lineWidth="20"
ctx.lineCap="round";
ctx.lineJoin="bevel";
ctx.beginPath();
ctx.moveTo(200,200);
ctx.lineTo(300,300);
ctx.lineTo(300,200);
ctx.stroke();
ctx.lineTo(400,400);
ctx.stroke();
ctx.lineTo(400,100);
ctx.stroke();
</script>
绘制路径(二次贝塞尔曲线)
quadraticCurveTo(con_x,con_y,x,y);
其中con_x、con_y指控制点坐标,x、y指终点坐标
绘制路径(三次贝塞尔曲线)
bezierCurveTo(20,100,200,100,200,20)
绘制圆弧
arc(x, y, radius, startAngle, endAngle, anticlockwise)
该方法有五个参数:x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise 为一个布尔值。为true时,是逆时针方向,否则顺时针方向。
注意:arc()函数中的角度单位是弧度,不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。
画一个圆,例:
ctx.arc(250,250,100,0,2*Math.PI);
ctx.stroke();
绘制文字
ctx.font = "20px 微软雅黑";
ctx.fillStyle = "Black";
ctx.fillText("hello", 5, 20);
fillText()是填充字,strokeText()是线框字,另外文字参考的点是左下角而非左上角
绘制文字(对齐方式)
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
基线为em方框顶端
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
基线为em方框底端
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
基线为em方框正中
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
默认效果,基线为普通字母基线
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);
基线为字母悬挂基线
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
默认效果,文本在指定位置开始
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
文本在指定位置结束
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
文本左对齐
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
文本在中点被放在指定位置
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);
文本右对齐
渐变 Gradients
createLinearGradient(x1, y1, x2, y2)
gradient.addColorStop(position, color)
createLinearGradient 方法接受 4 个参数,表示渐变的起点 (x1,y1) 与 终点 (x2,y2)。
例:
<script>
var can=document.getElementById("can");
var ctx=can.getContext("2d");
var gra = ctx.createLinearGradient(250, 0, 250, 500);
gra.addColorStop(0, 'red');
gra.addColorStop(0.5, 'yellow');
gra.addColorStop(1, 'blue');
//填充渐变
// ctx.fillStyle=gra;
// ctx.fillRect(0, 0, 500, 500);
// 边框渐变
ctx.lineWidth="20";
ctx.strokeStyle=gra;
ctx.strokeRect(0, 0, 500, 500);
</script>
放射性渐变/圆形渐变
createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient 方法接受 6 个参数,前三个定义一个以 (x1,y1) 为原点,半径为 r1 的圆,后三个参数则定义另一个以 (x2,y2) 为原点,半径为 r2 的圆。
阴影 Shadows
例:
var ctx = document.getElementById('canvas').getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 5, 30);
使用图片
drawImage(image, x, y)
其中 image 是 image 或者 canvas 对象或者video对象,x 和 y 是其在目标 canvas 里的起始坐标
drawImage(image, x, y, width, height)
drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。width 和 height,这两个参数用来控制 当像canvas画入时应该缩放的大小
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数image是一样的。其他的八个参数:
前4个是定义图像源的切片位置和大小,后4个则是定义切片的目标显示位置和大小。如图:
状态的保存和恢复
save 和 restore 方法是用来保存和恢复 canvas 状态的,都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照
存几步想要找回就恢复几步。
save();//存a
save();//存b
restore();
restore();//找到a
缩放 Scale
scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子,它们都必须是正值。值比 1.0 小表示缩小,比 1.0 大则表示放大,值为 1.0 时什么效果都没有
scale(2,2)