文章目录
前言
一、画布的流程
1.先得到画布对象
var can = document.querySelector("#can");
var ctx = can.getContext('2d');
代码如下:
// 先得到画布
var can = document.querySelector('#can')
var ctx = can.getContext("2d");
2. 画图流程
告诉大家我要开始绘画了 ctx.beginPath()
确定要绘制的起点 ctx.moveTo(x,y)
确定经过点... ctx.lineTo(x,y);
确定要绘制的终点 ctx.lineTo(x,y);
路径绘制结束 ctx.closePath(); // 关闭路径,将终点与起点链接起来
确定画笔的样式,使用设置好的画笔描边或者填色
ctx.fillStyle = "red" // 确定填充的颜色,默认值是黑色
ctx.fill(); // 开始填充
ctx.lineWidth = 8;
ctx.strokeStyle = 'blue';
ctx.stroke();展示出来
代码如下:
//我要开始绘画了
ctx.beginPath();
// 保存当前画布状态
ctx.save();
// 度数 画布旋转多少度
ctx.rotate(30*Math.PI/180);
//画布中心点偏移(原来的中心点:0 0 )x y的新坐标
ctx.translate(100,100)
// 确定路径
ctx.rect(0,0,200,200);
// 开始填充
ctx.fill();
效果图如下:
二. 快速绘制一些常见图像
(1) 矩形
A. ctx.rect(x,y,w,h) // 确定路径
x,y 起始坐标
w,h 宽高
B. ctx.strokeRect(x,y,w,h); // 确定路径并描出来
C. ctx.fillRect(x,y,w,h); // 确定路径并填充出来
(2) 快速画圆
ctx.arc(x,y,r,sa,ea,true/false):
x、y为圆心坐标,r为半径,
sa、ea分别为起始角度和结束角度,
true是逆时针画圆,false是顺时针画圆;
360度角即2PI弧度,1度就是2PI/360=PI/180弧度,
90度就是2PI/360*90=PI/2弧度(其他的角度自行计算)
(3) 贝塞尔曲线
A. 二次贝塞尔曲线
ctx.quadraticCurveTo (cx,cy,ex,ey)
cx,cy 控制点坐标
ex,ey 结束点坐标
开始点通过moveTo去做就行了
B. 三次贝塞尔曲线
bezierCurveTo (cx1,cy1,cx2,cy2,ex,ey)
代码如下:
ctx.beginPath();
ctx.moveTo(250,50);
ctx.bezierCurveTo(450,125,50,275,250,350)
ctx.stroke();
示例图:
(4) 在画板上绘制字体
1>fillText(text,x,y,maxWidth): 填充绘制
text表示文字 x、y为坐标
maxWidth可选,为文字最大宽度,防止文字溢出
2>strokeText(text,x,y,maxWidth): 描边绘制
text表示文字 x、y为坐标
maxWidth可选,为文字最大宽度,防止文字溢出;
3> 字体样式设置
ctx.font = "bold 40px Arial"
ctx.textAlign = "left | center | right"
注意对齐方式
ctx.textBaseline = "top | middle | bottom"
top: 四线格的最顶部线对齐起始点!
middle: 四线格的中间位置对齐起始点
bottom: 四线格的底部对齐起始点
代码如下:
ctx.font = "bold 30px Arial"
ctx.textAlign = "left"
ctx.textBaseline = "middle"
ctx.strokeStyle="red"
ctx.strokeText('Hello world',40,40);
ctx.stroke();
示例图如下:
(5) 图形组合方式
ctx.globalCompositeOperation = "某一种方式"
source-over:默认值,表示新图覆盖在旧图之上
source-atop:只绘制旧图和重叠的部分,其他透明
source-in:只绘制新图的重叠部分,其他透明
source-out:只绘制新图,重叠部分和旧图透明
destination-over:表示旧图覆盖在新图之上
destination-atop:只绘制新图和重叠的部分,其他透明
destination-in:只绘制旧图的重叠部分,其他透明
destination-out:只绘制旧图,重叠部分和新图透明
lighter:旧图与新图都绘制,重叠部分混色处理
xor:旧图和新图重叠处做透明处理
copy:只绘制新图形,不绘制旧图形
(6) 图形阴影
ctx.shadowColor = "red";
ctx.shadowBlur = 10
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
代码如下:
// 开始绘画
ctx.beginPath();
ctx.arc(200,200,150,0,2*Math.PI,false);
ctx.fillStyle = "#49cbf9"
ctx.shadowColor = '#5e8cae';
ctx.shadowBlur = 10
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fill();
例图如下:
(7) 图形的绘制
1> ctx.drawImage(imgage对象,x,y)
2> ctx.drawImage(imgage对象,x,y,w,h)
w,h 以压缩方式设置图形的宽高
3> ctx.drawImage(imgage对象,x,y,w,h,rx,ry,rw,rh)
x,y 图片上的坐标
w,h 要裁剪的宽高
rx,ry 画布上的坐标
rw,rh 要显示的图片的宽高
(8) 图片平铺
var image = new Image();
image.src = '../img/3.png';
image.onload = function(){
// 平铺方式 repeat 完全平铺 repeat-x/y no-repeat
var pat = ctx.createPattern(image,"repeat-x");
ctx.fillStyle = pat;
ctx.fillRect(100,100,400,300);
}
(9) 画布裁剪
ctx.beginPath();
ctx.rect(100,100,200,200);
ctx.clip();
// 先把图片对象创建出来
var image = new Image();
image.src = '../img/1.jpg';
image.onload = function(){
ctx.drawImage(image,0,0)
}
(10) 画布变形
1> scale(w,h) 画布缩放
w宽度上的缩放 h高度上的缩放
2> rotate(度数) 画布旋转
1度就是 Math.PI/180
旋转的中心点事画布的左上角,正度数是顺时针旋转
3> translate(x,y) 画布中心点偏移(原来的中心点:0 0)
x y 新的中心点坐标
(11) 画布存档
1> save() 保存当前的画布状态
2> restore() 回退到上一次的状态
(12) 清除画布
ctx.clearRect(x,y,w,h);
总结
Canvas是HTML5中提供的一个用于绘制图形的元素,通过JavaScript脚本可以在Canvas上绘制图形、图像、 创建动画等。