现在前端Canvas用到的地方也是比较多的,下面来了解一下Canvas。
目录
什么是Canvas及注意事项
Canvas:画布,是H5提供2D绘图技术
<canvas width="500" height="400"> 您的浏览器不支持canvas标签! </canvas>
var ctx = canvas.getContext("2d"); //得到画布上的画笔对象 获取画笔
canvas标签在浏览器中默认300*150的inline-block
Canvas注意事项:
画布宽度和高度只能使用HTML/JS属性来赋值,不能使用CSS样式赋值
每个画布上有且只有一个"画笔"对象--称为"绘图上下文"对象,--使用该对象进行绘图
使用Canvas绘图矩形
矩形定位点默认在:左上角
x,y是矩形的定位点 w,h是矩形的宽高
ctx.lineWidth = 1; 描边宽度(线宽)
ctx.fillStyle = "#ff0"; 填充矩形样式
ctx.strokeStyle = "#000" 描边矩形样式
ctx.fillRect(x,y,w,h); 填充矩形
ctx.strokeRect(x,y,w,h); 描边矩形
ctx.clearRect(x,y,w,h); 清除一个矩形范围所有绘图
使用Canvas绘制文本
ctx.textBaseline = "alphabetic"; 文本基线 top/middle/bottom/alphabetic
ctx.font = "12px sans-serif"; 文本大小和字体
ctx.fillText(str,x,y); 填充一段文本 实心字体
ctx.strokeText(str,x,y); 描边一段文本 空心字体
ctx.measureText(txt); 基于当前文字大小字体测量文本,返回一对象 {width:x}
ctx.measureText(str).width; 当前文字的宽度
例子:文字左右移动
<canvas id="c2" width="500" height="400"></canvas>
<script>
//1:获取画笔
var ctx = c2.getContext("2d");
//2:设置基线
ctx.textBaseline='top';
//3:设置文字大小与字体
ctx.font="30px SimHei";
//4:创建文本
var str = "Hello World";
var x = 0;
var y = 0;
var xDirection = 1;//方向 1 -1
var txtWidth = ctx.measureText(str).width;
setInterval(function(){
//5:清除己有内容
ctx.clearRect(0,0,500,400);
//6:再画出文本
ctx.strokeText(str,x,y);//左上角
//7:判断
x += 10 * xDirection;
if(x>=500-txtWidth){
xDirection = -1;
}else if(x<=0){
xDirection = 1;
}
},50);
</script>
Canvas绘图中使用渐变
线性渐变 linearGradient
径向渐变 redialGradient
var g = ctx.createLinearGradient(x1,y1,x2,y2);
g.addColorStop(offset,color);
....
g.addColorStop(offset,color);
ctx.strokeStyle = g;
ctx.fillStyle = g;
例子:
<canvas id="c2" width="500" height="400"></canvas>
<script>
//1:获取画笔
var ctx = c2.getContext("2d");
//2:创建渐变对象
//左右
var g = ctx.createLinearGradient(0,0,500,0);
//上下
//var g = ctx.createLinearGradient(0,0,0,400);
//对角线
// var g = ctx.createLinearGradient(0,0,500,400);
//3:添加颜色点
g.addColorStop(0,"#f00");
g.addColorStop(0.5,"#ff0");
g.addColorStop(1,"#0f0");
//4:将渐变对象设置填充样式
ctx.fillStyle = g;
//5:创建矩形
ctx.fillRect(0,0,500,400);
</script>
Canvas绘图 路径
Path:类似PS中的"钢笔工具",由多坐标点组成任意形状,路径不可见,可用于"描边","填充","裁剪"
ctx.beginPath(); 开始一条新路径
ctx.moveTo(x,y); 移动指定点
ctx.lineTo(x,y); 从当前到指定点画直线
ctx.arc(cx,cy,r,start,end); 绘制圆拱路径
ctx.stroke(); 对当前路径描边
ctx.fill(); 对当前路径填充
ctx.clip() 以当前路径裁剪
ctx.closePath() 闭合当前路径
画圆:
ctx.arc(圆点x,圆点y,半径,起始角度,结束角度);
半圆:ctx.arc(250,200,100,0*Math.PI/180,180*Math.PI/180);
例子1:两个三角形
<canvas id="c2" width="500" height="400"></canvas>
<script>
//1:获取画笔
var ctx = c2.getContext("2d");
//2:路径
ctx.beginPath();
//3:开始新路径
ctx.moveTo(100,100);
//4:移动指定点 100,100
//5:画直线 lineTo
ctx.lineTo(200,100);
ctx.lineTo(200,200);
//ctx.lineTo(100,100);
ctx.closePath();
//6:描边
//ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.strokeStyle = "#f00";
ctx.lineWidth = 3;
ctx.moveTo(300,300);
ctx.lineTo(300,400);
ctx.lineTo(400,400);
ctx.closePath();
ctx.stroke();
</script>
例子2:坐标系
<canvas id="c2" width="500" height="400"></canvas>
<script>
//1:获取画笔
var ctx = c2.getContext("2d");
//绘制X轴
ctx.beginPath();
ctx.moveTo(50,350);
ctx.lineTo(450,350);
ctx.lineTo(450-30,350-30);
ctx.lineTo(450,350);
ctx.lineTo(450-30,350+30);
ctx.lineWidth = 3;
ctx.strokeStyle = "#f00";
ctx.stroke();
//绘制Y轴
ctx.beginPath();
ctx.moveTo(50,350);
ctx.lineTo(50,50);
ctx.lineTo(50-30,50+30);
ctx.lineTo(50,50);
ctx.lineTo(50+30,50+30);
ctx.strokeStyle = "#00f";
ctx.stroke();
</script>
例子3:进度条
<canvas id="c2" width="500" height="400"></canvas>
<script>
//1:获取画笔
var ctx = c2.getContext("2d");
//2:绘制灰色底框
ctx.beginPath();
ctx.arc(250,200,100,0*Math.PI/180,360*Math.PI/180);
ctx.lineWidth = 15;
ctx.strokeStyle = "#aaa";
ctx.stroke();
//3:绘制绿色的进度条
//3.1 开始角度
var start = -90;
//3.2 结束角色
var end = -90;
//3.4 创建路径
var t = setInterval(function(){
//无需清除画布
ctx.beginPath();
ctx.arc(250,200,100,start*Math.PI/180,end*Math.PI/180);
end += 5;
ctx.strokeStyle = "#0a0";
ctx.stroke();
if(end >= 275){
clearInterval(t);
}
},100);
</script>
例子4:张嘴闭嘴
<canvas id="c2" width="500" height="400"></canvas>
<script>
//1:获取画笔
var ctx = c2.getContext("2d");
//2:创建张开嘴的笑脸
function openMouth(){
ctx.beginPath();
ctx.arc(250,200,100,45*Math.PI/180,315*Math.PI/180);
ctx.lineTo(250,200);
ctx.closePath();//合并线段
ctx.stroke();
//填充眼球
ctx.beginPath();
ctx.arc(250,150,25,0*Math.PI/180,360*Math.PI/180);
ctx.fillStyle = "#38f";
ctx.fill();
//填充闪亮眼神
ctx.beginPath();
ctx.arc(263,135,3,0*Math.PI/180,360*Math.PI/180);
ctx.fillStyle="#fff";
ctx.fill();
}
//3:创建闭嘴的笑脸
function closeMouth(){
ctx.beginPath();
//画笑脸
ctx.arc(250,200,100,0*Math.PI/180,360*Math.PI/180);
ctx.lineTo(250,200);
ctx.stroke();
//填充眼球 16:02--16:04
ctx.beginPath();
ctx.arc(250,150,25,0*Math.PI/180,360*Math.PI/180);
ctx.fillStyle = "#38f";
ctx.fill();
//填充闪亮眼神
ctx.beginPath();
ctx.arc(263,135,3,0*Math.PI/180,360*Math.PI/180);
ctx.fillStyle="#fff";
ctx.fill();
}
//一秒钟切换一次笑脸 16:05-16:10
var index = 1;
var t = setInterval(function(){
//清除笑脸..
ctx.clearRect(0,0,500,400);
index++;
if(index%2==0){
openMouth();
}else{
closeMouth();
}
},1000);
</script>
Canvas绘图 图像
canvas属于客户技术.图片在服务器中,所以浏览器必须先下载要绘制图片,且等待图片异步加载完成后再绘图.
var p3 = new Image();
p3.src = "img/p3.png"; //浏览器自动加载图片 下载 p3.width为0
p3.onload = function(){ //图片加载完成 p3.width为图片宽度
ctx.drawImage(p3,x,y); //原始图片大小 x,y是坐标
ctx.drawImage(p3,x,y,w,h);//拉伸绘图 w,h拉伸图片
}
例子1:左右移动的图片
<canvas id="c2" width="500" height="400"></canvas>
<script>
//1:获取画笔
var ctx = c2.getContext("2d");
var p3 = new Image();
p3.src = "img/p3.png";
var x = 0;
var y = 0;
var xDirection = 1;
p3.onload = function(){
var t = setInterval(function(){
ctx.clearRect(0,0,500,400);
ctx.drawImage(p3,x,y);
x += 5*xDirection;
if(x>=500-p3.width){
xDirection = -1;
}else if(x<=0){
xDirection = 1;
}
},30);
};
</script>
例子2:图片随鼠标移动
<canvas id="c2" width="500" height="400"></canvas>
<script>
//1:获取画笔
var ctx = c2.getContext("2d");
var p3 = new Image();
p3.src = "img/p3.png";
p3.onload = function(){
var x = 0;//要绘制的飞机位置
var y = 0;//要绘制的飞机位置
//!!监听鼠标在画布上方移动事件e
//x = e.offsetX
//y = e.offseteY
//canvas绘图只够给画布绑定事件
c2.onmousemove = function(e){
x = e.offsetX;
y = e.offsetY;
};
//!!创建定时器,不停清画布,重绘飞机
setInterval(function(){
ctx.clearRect(0,0,500,400);
ctx.drawImage(p3,x,y);
},50);
};
</script>
Canvas绘图 变形操作
Canvas绘图中也有变形的技术,可以针对某一个图像、图形的绘制过程进行变开
ctx.rotate(弧度); 旋转绘图片对象,轴点是画布的原点 (0,0)
ctx.translate(x,y); 将整个画布的原点平移到指定点 (100,150)
ctx.save(); 保存画笔当前所有变形状态 (游戏中存盘)
ctx.restore(); 恢复画笔变形到最近一次保存 (游戏读取读数据从磁盘中);
例子1:图片的旋转
<canvas id="c1" width="500" height="400">您的浏览器不支持canvas标签</canvas>
<script>
//1:获取画笔
var ctx = c1.getContext("2d");
//2:创建图片对象
var p3 = new Image();
//3:修改图片对象src属性
p3.src = "img/p3.png";
//4:为图片对象绑定事件 onload
p3.onload = function(){
//6:重新设置原点(0,0)==>(200,200)
ctx.translate(200,200);
//5:在事件处理函数中绘制图像
ctx.drawImage(p3,0,0);
//7:设置旋转角度 90 180 270 360
var deg = 90*Math.PI/180;
ctx.rotate(deg);//旋转角度累加效果
ctx.drawImage(p3,0,0);
ctx.rotate(deg);//旋转角度累加效果
ctx.drawImage(p3,0,0);
ctx.rotate(deg);//旋转角度累加效果
ctx.drawImage(p3,0,0);
}
</script>
例子2:图片旋转(动态)
<canvas id="c1" width="500" height="400">您的浏览器不支持canvas标签</canvas>
<script>
//1:获取画笔
var ctx = c1.getContext("2d");
//2:创建图片对象
var p3 = new Image();
//3:修改src属性
p3.src = "img/p3.png";
//4:绑定事件onload
p3.onload = function(){
//5:设置每次旋转角度 5
var deg = 5*Math.PI/180;
//6:修改画布原点
ctx.translate(200,200);
//7:创建定时器
setInterval(function(){
//8:清除画布
ctx.clearRect(-100,-50,500,400);
//9:指定旋转角度
ctx.rotate(deg);
//10:画图像
ctx.drawImage(p3,-100,-50);
},50);
}
</script>