canvas标签用于绘制图画，它是通过js来实现图画的绘制，这里将学习一下其基本用法。
首先，创建一个画布，这样我们就可以在上面进行创作了。
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
</head>
<body>
<canvas style="border:1px solid;"></canvas>
</body>
</html>
canvas默认会生成一个矩形，给其加上边框，方便我们进行查看效果。接下来使用js在上面添加线条，图形等图画。
2017-07-23_211538.png
线条
在这里，我们绘制一条宽度为10px的直线，坐标从（20，20）到（260，20），在浏览器上坐标的原点在左上角，往右为x轴，往左为y轴。直线的两端我们设置为圆形。
<script type="text/javascript">
//获取对象
var c=document.getElementById("myCanvas");
//getContext() 方法返回一个用于在画布上绘图的环境。
var ctx=c.getContext("2d");
//设置线条的宽度
ctx.lineWidth=10;
//起始一条路径
ctx.beginPath();
//butt 默认，向线条的末端添加平直的边缘。round 向线条的每个末端添加圆形线帽。square 向线条的每个末端添加正方形线帽。
// ctx.lineCap="square";
// ctx.lineCap="butt";
ctx.lineCap="round";
//起点
ctx.moveTo(20,20);
//终点
ctx.lineTo(260,20);
//沿路径绘制
ctx.stroke();
</script>
2017-07-23_211811.png
然后，我们来绘制一条折线，画一条有一个拐角的折线，我们可以想象一下我们用画笔是怎么画的，这里的绘制也是同样的画法，确定三个点，起点，转折点，终点，然后连接起来，就可以了。
<script>
//折线
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=10;
//转折处采用圆形
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();
</script>
2017-07-23_213405.png
矩形
绘制矩形也是很简单，首先确定矩形左上点坐标，然后给出矩形的宽和高就能绘制出来。
<script type="text/javascript">
//矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//颜色填充
ctx.fillStyle="yellow";
ctx.fillRect(20,20,150,100);
</script>
2017-07-23_214118.png
绘制一个颜色渐变的矩形。
<script type="text/javascript">
//填充颜色渐变的矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//4个参数分别是开始x坐标，y坐标，结束的x,y坐标
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
</script>
2017-07-23_224903.png
绘制一个矩形框颜色渐变的矩形，官方叫法为笔触渐变的矩形。
<script type="text/javascript">
//笔触颜色渐变的矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//4个参数分别是开始x坐标，y坐标，结束的x,y坐标
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"blue");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"green");
//笔触样式
ctx.strokeStyle=my_gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
</script>
2017-07-23_215218.png
绘制一个带阴影的矩形。
<script type="text/javascript">
//带阴影的矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//阴影级别
ctx.shadowBlur=20;
//阴影颜色
ctx.shadowColor="black";
//偏移位置
ctx.shadowOffsetX=20;
ctx.shadowOffsetY=20;
ctx.fillStyle="blue";
ctx.fillRect(20,20,150,100);
</script>
2017-07-23_220211.png
变化
这里来看一下矩形的放大效果和旋转效果。
<script type="text/javascript">
//放大矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,50,30);
ctx.ctx.scale(2,2);
ctx.strokeRect(20,20,50,30);
</script>
2017-07-23_220740.png
<script type="text/javascript">
//旋转矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//弧度制
ctx.rotate(20*Math.PI/180);
ctx.strokeRect(20,20,50,30);
</script>
2017-07-23_220948.png
其中还有一些属性和方法这里就不一一介绍了，有兴趣或者又需要的小伙伴可以去查看相关的手册。想要实现更为厉害的效果，可以查看下面的文章。
10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演示
网友评论