一、canvas介绍
canvas（画布）是HTML的新标签，它就相当于一张白纸，我们可以利用它绘制出很多酷炫的效果，IE8以下的浏览器都不支持canvas标签，而且我们一般也不要用css来设置它的宽高。如果要想使用它必须先熟练使用JavaScript，如果你已经会用JavaScript，那我们就一起来看一下该如何使用它吧！
首先我们创建一个html文件，结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
canvas { /*为了方便观察，我们给canvas加个轮廓*/
margin-left: 30px;
margin-top: 30px;
outline: 1px solid red;
}
</head>
<body>
<canvas id="canvas" width="500" height="500">
你的浏览器不支持canvas标签，请下载最新浏览器
</canvas>
</body>
<script type="text/javascript">
</script>
</html>
二、基础方法
在了解方法之前我们先要了解一下canvas的坐标系。
绘制直线
小练习：2、绘制三角形
// 获取元素
var canvas = document.getElementById("canvas");
// 获取上下文对象（画笔）
var ctx = canvas.getContext('2d');
// 画一条线
// 1、开始绘制
ctx.beginPath();
// 2、描述开始点，把画笔移到开始位置
ctx.moveTo(50,50)
// 3、放置点
ctx.lineTo(250,250);
ctx.lineTo(40,400);
// 4、结束绘制
ctx.closePath();
// 设置线的宽度
ctx.lineWidth = 10;
// 设置线的颜色
ctx.strokeStyle = '#d88adf';
// 设置线的圆角
// 只针对转角处，两条线的交接点
ctx.lineJoin = 'round';
// 5、绘制
ctx.stroke();
绘制三角形
7、ctx.fill(); 进行填充。
8、绘制矩形。
- ctx.strokeRect(x, y, w, h)按照矩形画线，前面两个参数为起始点坐标，后面两个参数为矩形的宽高。
- ctx.fillRect(x, y, w, h)按照矩形填充，前面两个参数为起始点坐标，后面两个参数为矩形的宽高。
9、绘制圆ctx.arc(x, y, r, startAngle, endAngle, direction);
参数说明：
x和y为圆心点坐标；
startAngle和endAngle为起始位置和结束位置的弧度（转化为角度：var deg = Math.PI/180)；
direction为绘制方向，false为顺时针方向，true为逆时针方向。
10、绘制文字
- ctx.fillText(text, x, y, maxWidth?) ; 填充文字
- ctx.strokeText(text, x, y, maxWidth?) ; 描边文字
参数说明：
text为要绘制的文本内容；
x和y为绘制文字的起始坐标点，默认为文字的右下角；
maxWidth?为文本的宽度；
三、基础属性
1、颜色
- ctx.strokeStyle = "red" 线的颜色
- ctx.fillStyle = "red" 填充颜色
2、线
- ctx.lineWidth = 10; 设置线的宽度可以是number或者string。
- ctx.lineJoin = 'round'; 设置线的圆角 ，只针对转角处，两条线的交接点。
- ctx.lineCap = 'round'; 设置线的圆角。
3、文字
- ctx.textAlign = "left"; 文字水平对齐方式。
值有三种，start或者left，center，end或者right。 - ctx.textBaseline = "top"; 垂直对齐方式。
值有三种，top，middle，bottom。 - ctx.font = "50px 宋体"; 注意单独设置字体大小不起作用，需要同时设置字体。
4、阴影
- ctx.shadowColor = 'red'; 阴影颜色
- ctx.shadowOffsetX = 10; 阴影X轴偏移量
- ctx.shadowOffsetY = 10; 阴影Y轴偏移量
- ctx.shadowBlur = 10; 阴影模糊程度
*5、渐变
- ctx.createLinearGradient(x1, y1, x2, y2);
创建一个从(x1, y1)点到(x2, y2)点的线性渐变对象。 - ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。 - addColorStop(position, color); position表示添加颜色的位置，取值范围为[0, 1]，0表示起点，1表示终点；color表示添加的颜色，取值可以是任何CSS颜色值。
渐变对象创建并配置完成之后就可以将其赋予Context对象的strokeStyle属性或者fillStyle属性，然后绘制的图形就具有了所需的渐变效果。
四、练习
1、绘制五角星
五角星
代码如下：
// 获取元素
var canvas = document.getElementById("canvas");
// 获取上下文对象（画笔）
var ctx = canvas.getContext('2d');
var x1 = 500*Math.sin(Math.PI/10); //18度角所对的直角边
var h1 = 500*Math.cos(Math.PI/10); //18度角所在的直角边
var x2 = 500*Math.cos(Math.PI/5); //36度角所在的直角边
var h2 = 500*Math.sin(Math.PI/5); //36度角所对的直角边
// 开始绘制
ctx.beginPath();
// 放置起始点
ctx.moveTo(250,0);
ctx.lineTo(250 - x1, h1);
ctx.lineTo(250 - x1 + x2, h1 - h2);
ctx.lineTo(0, h1 - h2);
ctx.lineTo(250 + x1, h1);
ctx.lineTo(250, 0);
// 设置填充颜色
ctx.fillStyle = 'red';
// 填充
ctx.fill();
2、绘制矩形
矩形
代码如下：
// 获取元素
var canvas = document.getElementById("canvas");
// 随机数
var randomFun = function (max, min) {
return parseInt(Math.random()*(max - min) + min)
}
// 随机颜色
var colorFun = function () {
return 'rgb('+ randomFun(255,0) + ',' + randomFun(255,0) + ',' + randomFun(255,0) + ')';
}
// 获取上下文对象（画笔）
var ctx = canvas.getContext('2d');
var w = 200;
var x = 0;
var y = 0;
// 绘制
for (var i = 0; i < 11; i++) {
ctx.fillStyle = colorFun();
ctx.fillRect(x + i*30,y + i*30,w,w)
}
3、绘制多重圆环
多重圆环
代码如下：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var r = 20;
var x = 100;
var y = 250;
for (var i = 0; i < 10; i++) {
ctx.beginPath();
ctx.strokeStyle = (i % 2 == 0) ? 'cyan' : 'red';
ctx.arc(x + i * 20, y , r + i * 20, Math.PI*2 , false);
ctx.stroke();
}
4、躁动的小球
躁动的小球
代码如下：
// 获取元素
var canvas = document.getElementById("canvas");
var randomFun = function (max, min) {
return parseInt(Math.random() * (max - min + 1) + min);
}
randomFun()
var colorFun = function () {
return 'rgba('+ randomFun(255, 0) + ',' + randomFun(255, 0) + ',' + randomFun(255, 0) + ',' + (Math.random() + 0.1) + ')';
}
canvas.width = document.body.offsetWidth;
canvas.height = document.body.offsetHeight;
console.log(document.body.offsetHeight);
var w = canvas.width;
var h = canvas.height;
// 获取上下文对象（画笔）
var ctx = canvas.getContext('2d');
// 普通版
// for (var i = 0; i < 200; i++) {
// var r = randomFun(40,20);
// var x = randomFun(w - r, r);
// var y = randomFun(h - r, r);
// ctx.beginPath();
// ctx.fillStyle = colorFun();
// ctx.arc(x,y,r,Math.PI*2,false);
// ctx.fill()
// }
// 面向对象版
function Ball(x, y, r, color) {
this.r = r || randomFun(30, 10);
this.x = x || randomFun(w - this.r, this.r);
this.y = y || randomFun(h - this.r, this.r);
this.color = color || colorFun();
this.show = function () {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.r, Math.PI*2, false);
ctx.fill();
}
}
for (var i = 0; i < 500; i++) {
var ball = new Ball();
ball.show()
}
5、绘制文字
文字
// 获取元素
var canvas = document.getElementById("canvas");
// 获取上下文对象（画笔）
var ctx = canvas.getContext('2d');
var str1 = '蒹葭苍苍';
var str2 = '白露为霜';
var str3 = '所谓伊人';
var str4 = '在水一方';
ctx.font = '50px 黑体';
ctx.beginPath()
ctx.fillStyle = 'purple';
ctx.textBaseline = 'top';
ctx.fillText(str1, 0 , 0);
ctx.fillStyle = 'red';
ctx.textAlign = 'right'
ctx.textBaseline = 'top';
ctx.fillText(str2, 500 , 0);
ctx.fillStyle = 'green';
ctx.textAlign = 'left'
ctx.textBaseline = 'bottom';
ctx.fillText(str3, 0 , 500);
ctx.fillStyle = 'blue';
ctx.textAlign = 'right'
ctx.textBaseline = 'bottom';
ctx.fillText(str4, 500 , 500);
（未完待续•••••••••••••！）
以上内容纯属个人理解，由于水平有限，若有错漏之处敬请指出斧正，小弟不胜感激。
网友评论