Canvas概述
Canvas:一个轻量级的画布,利用js代码在浏览器上画画,无需插件。
文章目录
一、基础概念
1.标签
属性只有俩:width、heigth
。
且width、heigth
只能在标签<canvas></canvas>
里设置,在css样式<style></style>
里面设置会变形。
<canvas width="600" height="300">
当前浏览器版本不支持,请升级浏览器
</canvas>
2.兼容性
canvas标签里的文字
只在低版本浏览器(IE6/7/8)
上显示
,
在高版本浏览器
是看不到
canvas标签内部的文字
<canvas width="600" height="300">
当前浏览器版本不支持,请升级浏览器
</canvas>
以上代码在高低版本浏览器运行结果
:
3.绘制
<body>
<canvas width="600" height="300" id="mycanvas">
当前浏览器版本不支持,请升级浏览器
</canvas>
<script>
//得到canvas画布
var canvas = document.getElementById("mycanvas");
//获取画布上下文,2d的上文 ,3d的下文
//所有的图像绘制都是通过ctx属性或者是方法进行设置,和canvas标签没有关系了
var ctx = canvas.getContext("2d");
//设置颜色(必须先设置,置于绘制之前)
ctx.fillStyle = "green";
//绘制矩形
ctx.fillRect(100,100,200,50);
console.log(ctx);
</script>
</body>
重点方法:var ctx = canvas.getContext("2d");
,所有的图像绘制都是通过ctx属性或者是方法进行设置(下图控制台打印ctx),和canvas标签没有关系了
ctx.fillRect(100,100,200,50);
绘制矩形的坐标图解:
4.动画
canvas轻量级来自:canvas绘制完图形之后,就像素化他们了,canvas无法从画布再次得到这个图形
canvas动画来自:想要canvas动起来,就需要再画一次,实际上就是静态页面连续播放,所以
canvas思想:清屏-更新-渲染
<body>
<canvas id="mycanvas" width="600" height="600">
当前浏览器版本不支持,请升级浏览器
</canvas>
<script>
//得到画布
var canvas = document.getElementById("mycanvas");
//获取画布上下文
var ctx = canvas.getContext("2d");
//设置颜色
ctx.fillStyle = "blue";
//信号量
var left = 100;
//动画过程
setInterval(function(){
//定时器
//清除画布,0,0,代表从什么位置开始清除,600,600,代表清除的宽度和高度,即动画的开始和结束位置
ctx.clearRect(0, 0, 600, 600);
//更新信号量
left++;
//绘制矩形,left为x坐标,每自增一次,则从新的x轴位置重新画一次
ctx.fillRect(left, 100, 100, 100)
},10)
console.log(ctx)
</script>
</body>
实际动画就是相关静态画面连续播放
,每一次绘制的静态画面叫“一帧”,时间的间隔(定时器的间隔)就是表示帧的间隔
5.面向对象编程的动画
因为canvas不能得到已经上屏的对象,所以要维持对象和状态。怎么维持对象和状态呢,就是用面向对象,直接实例化 。
<body>
<canvas id="mycanvas" width="600" height="600">
当前浏览器版本不支持,请升级浏览器
</canvas>
<script>
//因为canvas不能得到已经绘制完成的对象,所以要维持对象的状态
//所以要用面向对象实现的编程,维持canvas需要的属性和状态
//获取画布
var canvas = document.getElementById("mycanvas");
//获取上下文
var ctx = canvas.getContext("2d");
function Rect(x, y, w, h, color){
//维护状态
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.color = color;
}
//更新的方法
Rect.prototype.update = function(){
this.x++;
}
//渲染
Rect.prototype.render = function(){
//设置颜色
ctx.fillStyle = this.color;
//渲染
ctx.fillRect(this.x, this.y, this.w, this.h)
}
//创建实例
var r1 = new Rect(100, 100, 50, 50, "green");
var r2 = new Rect(200, 200, 100, 50, "gray");//初始位置和宽度改变
//动画过程
//动画过程在主定时器里面,每一帧都会调用实例的更新和渲染方法
setInterval(function(){
//canvas思想:清屏-更新-渲染
//清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
//更新方法
r1.update();
//渲染
r1.render();
//更新方法
r2.update();
//渲染
r2.render();
},10)
</script>
</body>
两个实例化如图:
二、详解Canvas的绘制功能
1.绘制矩形
1.1填充矩形
填充:fill
,矩形:rect
,填充方法=fillRect
、fillStyle
//设置颜色(必须先设置,置于填充之前)
ctx.fillStyle = "green";
//填充矩形
ctx.fillRect(100,100,100,100);//x坐标,y坐标,矩形长,矩形宽
1.2绘制矩形边框
绘制描边:stroke
,矩形:rect
,绘制方法=strokeRect
、strokeStyle
//设置颜色(必须先设置,置于绘制之前)
ctx.strokeStyle = "red";
//填充矩形
ctx.strokeRect(300,100,100,100);//x坐标,y坐标,矩形长,矩形宽
1.3清除画布
//擦除画布
ctx.clearRect(0, 0, 600, 600);//一般canvas画布的大小
完整代码:
<style>
canvas{
border: 1px solid #000;
}
</style>
<body>
<div>
<button id="btn1">画一个矩形</button>
<button id="btn2">画一个矩形边框</button>
<button id="btn3">清除画布</button>
</div>
<canvas width="600" height="600" id="mycanvas">
当前浏览器版本不支持,请升级浏览器
</canvas>
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
//得到canvas画布
var canvas = document.getElementById("mycanvas");
//获取画布上下文,2d的上文 ,3d的下文
//所有的图像绘制都是通过ctx属性或者是方法进行设置,和canvas标签没有关系了
var ctx = canvas.getContext("2d");
//填充矩形,fill=填充,rect=矩形
btn1.onclick = function(){
//设置颜色(必须先设置,置于绘制之前)
ctx.fillStyle = "green";
//填充矩形
ctx.fillRect(100,100,100,100);//100、100=x,y坐标,200、50=长、宽
};
//绘制矩形边框,stroke=绘制
btn2.onclick = function(){
//设置颜色(必须先设置,置于绘制之前)
ctx.strokeStyle = "red";
//绘制矩形边框
ctx.strokeRect(300,100,100,100);//100、100=x,y坐标,200、50=长、宽
};
//擦除画布
btn3.onclick = function(){
ctx.clearRect(0, 0, 600, 600);
}
console.log(ctx);
</script>
</body>
结果图示:
2.绘制路径
绘制路径就是设置一个不规则的多边形状态
设置绘制的起点
ctx.beginPath();
移动绘制点
ctx.moveTo(x,y);
绘制行进路径
ctx.lineTo(x,y);
//多条路径
ctx.lineTo(x,y);
结束路径,即闭合路径
ctx.closePath();
填充
ctx.fill();//无需添加结束路径“ ctx.closePath();因为即使没有闭合,填充也会使之闭合
描边,绘制路径
ctx.stroke();//需添加结束路径“ ctx.closePath();使之闭合
路径描绘坐标图解:
完整代码:
<style>
canvas{
border: 1px solid #000;
}
</style>
<body>
<canvas id="mycanvas" width="600" height="400">
当前浏览器版本不支持,请升级浏览器
</canvas>
<script>
//绘制路径就是设置一个不规则的多边形状态
//路径都是闭合的,使用路径进行绘制需要既定的步骤
//1、设置路径的起点;2、使用绘制命令画出路径;3、封闭路径;4、填充或者绘制已经封闭路径的形状
//获取画布
var canvas = document.getElementById("mycanvas");
//获取上下文
var ctx = canvas.getContext("2d");
//设置路径的起点
ctx.beginPath();
//移动绘制点
ctx.moveTo(100, 100);
//描述行进路径
ctx.lineTo(200, 200);
ctx.lineTo(400, 180);
ctx.lineTo(500, 50);
//封闭路径,结束路径
ctx.closePath();
//设置颜色,绘制这个不规则的图形
ctx.strokeStyle = "red";
ctx.stroke();
//填充这个不规则图形
//ctx.fillStyle = "green";
//ctx.fill();
</script>
</body>
3.绘制圆弧
圆弧也是绘制路径,也需要设置绘制的起点beginPath()
和绘制路径stroke()
//创建一个路径
ctx.beginPath();
ctx.arc(100, 100, 100, 0, 6, false);//圆心的x坐标,圆心的y坐标,圆半径,线条起始点,线条结束点,false顺时针,true逆时针
ctx.stroke();
线条起始点和线条结束点,实际是圆的弧度,2Π就代表一整个圆,所以,设置ctx.arc(100, 100, 100, 0, 2 * Math.PI, false);
可以看到一个整圆.
逆时针画圆:
在逆时针绘制=整圆-顺时针绘制
总结
官方文档:canvas Web API 接口文档