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
其中还有一些属性和方法这里就不一一介绍了, 有兴趣或者又需要的小伙伴可以去查看相关的手册想要实现更为厉害的效果, 可以查看下面的文章
来源: http://www.jianshu.com/p/5dcb134c19c5