0x001 Canvas是啥？
说白了Canvas就是一块画布，可以使用js当画笔在上面绘画的画布，可以显示在网页上的画布，同时也是通过期中考的关键技术。
0x002 Canvas坐标图
Paste_Image.png
0x003 Canvas使用方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas测试</title>
</head>
<body>
<!-- 建立了一个高300px，宽300px的的画布 -->
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
Paste_Image.png
0x004 Canvas替代内容
如果不支持就用文本代替，不过如今大多数浏览器已经可以支持了，所以我也找不到浏览器测试是否可以用一张图片代替。
<canvas id="canvas" width="300" height="300">
小傻逼浏览器不支持Canvas</canvas>
0x005 Canvas和CSS
canvas元素和其他html元素一样，可以使用css来改变canvas的一些样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas测试</title>
<style media="screen">
#canvas{
width: 200px;
height: 300px;
margin: 10px;
border: 5px solid red;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
Paste_Image.png
但是这样是有问题的看以下案例，它将会绘制一条对角线
但是这样其实是有问题的，因为canvas的默认高度是300*150，所以，如果使用css为canvas设置width和height会导致canvas绘制的图像被压缩。所以还是使用属性来设置canvas的宽高吧
0x006 canvasAPI
canvas页面,我们将再红色方框的canvas内绘制：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas测试</title>
<style media="screen">
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500" style="border: 5px solid red"></canvas>
</body>
<script type="text/javascript">
</script>
</html>
Paste_Image.png
绘制一条直线
- 代码：
// 获取canvas元素
var canvas=document.getElementById("canvas");
// 获取canvas上下文
var context=canvas.getContext('2d');
// 绘制直线
context.beginPath();//开始绘制路径
context.moveTo(0,500);//设置开始点
context.lineTo(500,0);//设置结束点并连接开始点和结束点
context.stroke();//将图像绘制出来
-
效果
Paste_Image.png
路径
- 代码
// 获取canvas元素
var canvas=document.getElementById("canvas");
// 获取canvas上下文
var context=canvas.getContext('2d');
// 绘制直线
context.beginPath();
context.moveTo(0,0);
context.lineTo(0,100);
context.lineTo(0,100);
context.lineTo(100,100);
context.lineTo(100,200);
context.lineTo(200,200);
context.lineTo(200,300);
context.lineTo(300,300);
context.lineTo(300,400);
context.lineTo(400,400);
context.lineTo(400,500);
context.lineTo(500,500);
context.stroke();
- 效果：
Paste_Image.png
绘制一棵树
-
代码：
// 获取canvas元素 var canvas=document.getElementById("canvas"); // 获取canvas上下文 var context=canvas.getContext('2d'); // 绘制直线 context.beginPath(); context.moveTo(100,100); context.lineTo(50,200); context.lineTo(90,200); context.lineTo(40,300); context.lineTo(80,300); context.lineTo(30,400); context.lineTo(70,400); context.lineTo(70,500); context.lineTo(130,500); context.lineTo(130,400); context.lineTo(170,400); context.lineTo(120,300); context.lineTo(160,300); context.lineTo(110,200); context.lineTo(150,200); context.closePath(); context.stroke(); 效果
Paste_Image.png
修改样式
-
代码：
// 获取canvas元素 var canvas=document.getElementById("canvas"); // 获取canvas上下文 var context=canvas.getContext('2d'); // 绘制直线 context.beginPath(); context.moveTo(100,100); context.lineTo(50,200); context.lineTo(90,200); context.lineTo(40,300); context.lineTo(80,300); context.lineTo(30,400); context.lineTo(70,400); context.lineTo(70,500); context.lineTo(130,500); context.lineTo(130,400); context.lineTo(170,400); context.lineTo(120,300); context.lineTo(160,300); context.lineTo(110,200); context.lineTo(150,200); context.lineWidth=8; context.lineJoin='round'; context.strokeStyle='#663300'; context.closePath(); context.stroke(); 效果：
Paste_Image.png
填充
-
代码 ：
context.fillStyle="red"; context.fill(); 效果：
Paste_Image.png
绘制正方形
-
代码
var canvas=document.getElementById("canvas"); // 获取canvas上下文 var context=canvas.getContext('2d'); context.fillStyle="red"; //前两个参数数位置x、y，后两个参数是宽、高 context.fillRect(100,100,100,100); context.stroke(); 效果
Paste_Image.png
绘制曲线
- 说明：
Paste_Image.png
-
代码：
var canvas=document.getElementById("canvas"); // 获取canvas上下文 var context=canvas.getContext('2d'); //指定起点 context.moveTo(250,0); //前两个是控制点，后两个是终点 context.quadraticCurveTo(250,250,500,250); context.strokeStyle="red"; context.lineWidth=20; context.stroke(); 效果
Paste_Image.png
圆形：
-
代码：
// 获取canvas元素 var canvas=document.getElementById("canvas"); // 获取canvas上下文 var context=canvas.getContext('2d'); context.beginPath(); // 前两个分别是圆心的x、y坐标， //第三个是圆的半径， //第四第五个是绘制弧线的开始弧度和结束弧度 1*Math.PI是半圆，2*Math.PI则是一个圆 context.arc(100,100,100,0,2*Math.PI); context.stroke(); context.closePath(); //弧度的开始是从3点钟位置开始 context.beginPath(); context.arc(300,300,100,0,0.1*Math.PI); context.stroke(); 效果
Paste_Image.png
渐变
-
代码：
// 获取canvas元素
var canvas=document.getElementById("canvas");
// 获取canvas上下文
var context=canvas.getContext('2d');
//前两个参数指定开始的点的x、y坐标，后两个是结束的点的x、y坐标
var lg=context.createLinearGradient(0,0,100,0);
lg.addColorStop(0,"#ff0000");
lg.addColorStop(0.5,"#00ff00");
lg.addColorStop(1,"#0000ff");
context.fillStyle=lg;
context.fillRect(0,0,175,50);//注意渐变色相对位置是context，不是rect //如果绘制的图像超出了渐变色的坐标 //将会使用最后设置的颜色来填充 var lg=context.createLinearGradient(0,0,100,0); lg.addColorStop(0,"#ff0000"); lg.addColorStop(0.5,"#00ff00"); //使用蓝色填充 lg.addColorStop(1,"#0000ff"); context.fillStyle=lg; context.fillRect(200,200,100,100); //如果渐变 线是斜的， 那么最后填充的渐变也是斜的 var lg=context.createLinearGradient(200,200,400,400); lg.addColorStop(0,"#ff0000"); lg.addColorStop(0.5,"#00ff00"); //使用蓝色填充 lg.addColorStop(1,"#0000ff"); context.fillStyle=lg; context.fillRect(200,200,200,200); //径向渐变 var lg=context.createRadialGradient(50,450,0,80,500,100); lg.addColorStop(0,"#ff0000"); lg.addColorStop(0.5,"#00ff00"); //使用蓝色填充 lg.addColorStop(1,"#0000ff"); context.fillStyle=lg; context.fillRect(0,400,200,200); 效果：
Paste_Image.png
大项目：绘制一堆不断变大变小的随机移动的气泡
- 效果：
GIF.gif
-
html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>气泡变化</title> </head> <body> <canvas id="canvas" width="1200px" height="800px"> </canvas> </body> <script src="main.js"> </script> </html> -
获取context
var canvas=document.querySelector('canvas'), context=canvas.getContext('2d'); // 这个数组用于保存画布上出现的所有球 var balls = []; -
构建一个气泡对象
// 用于表示球的所有细节的Ball函数 // x、y分别是气泡初始化的位置 //radius是气泡的半径-随机 //strokeColor 绘制颜色 -随机 //填充颜色-随机 //flag半径变大还是变小 //flagx x增大还是减小 //flagy y增加还是减少 function Ball(x, y) { this.x = x; this.y = y; this.radius = Math.round(Math.random()*10)*10; this.strokeColor = 'rgba('+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)*25+',0)'; this.fillColor = 'rgba('+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)/10+')'; this.flag=1; this.flagx=1; this.flagy=1; } -
向数组添加小球
function addBall() { // 小球半径 var radius = Math.round(Math.random()*10)*10; var x=0,y=0; if (x<200||x>1000){ x=Math.round(Math.random()*10)*100; } if (y<200||x>600){ y=Math.round(Math.random()*10)*60; } // 创建新的ball对象 var ball = new Ball(x,y); // 将其保存在balls数组中 balls.push(ball); } 绘制图像并且在20ms后再次绘制
function drawFrame() {
// 清除画布
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
// 循环所有的球,并重新定义他们的位置和大小
for(var i=0; i<balls.length; i++) {
if (balls[i].flagx==1){
balls[i].x++;
if (balls[i].x>=800){
balls[i].flagx=0;
}
}else if(balls[i].flagx==0){
balls[i].x--;
if (balls[i].x<=0){
balls[i].flagx=1;
}
}
if (balls[i].flagy==1){
balls[i].y++;
if (balls[i].y>=600){
balls[i].flagy=0;
}
}else if(balls[i].flagy==0){
balls[i].y--;
if (balls[i].y<=0){
balls[i].flagy=1;
}
}
if (balls[i].flag==1){
balls[i].radius++;
balls[i].y++;
if (balls[i].radius>=100){
balls[i].flag=0;
}
}else if (balls[i].flag==0){
balls[i].radius--;
balls[i].x--;
balls[i].y--;
if (balls[i].radius<=0){
balls[i].flag=1;
}
}
var ball = balls[i];
context.beginPath();
context.fillStyle = balls[i].fillColor;
context.strokeStyle=balls[i].strokeColor;
// 绘制球
context.arc(balls[i].x, balls[i].y, balls[i].radius, 0, Math.PI*2);
context.lineWidth = 0;
context.fill();
context.stroke();
}
// 20毫秒后绘制下一帧
setTimeout(drawFrame, 20);
}
-
调用并且初始化小球
for(var i=0;i<50;i++){ addBall(); } drawFrame();
