canvas 介绍
Canvas 是 html5 新增的组件, 用于在网上绘制图形, 该元素标签的强大之处在于可以直接在 HTML 上进行图形操作, 具有极大的应用价值. 但 canvas 本身没有绘图能力的, 它就像一块幕布, 可以用 js 在上面绘制各种图表, 动画等.
在没有 Canvas 的年代, 绘图只能借助 Flash 插件来实现, 页面不得不用 JavaScript 和 Flash 进行交互. 有了 canvas, 我们就不需要 Flash 了, 直接用 JavaScript 就可以完成绘制.
canvas 用法
一, 定义 canvas 标签
"canvas"
> 你的浏览器不支持 canvas 标签
如果你的浏览器支持 canvas 标签, 那么就不会显示出来, 否则就会显示出来.
二, 在 canvas 上画图
- var canvas=document.getElementById("canvas");
- var context=canvas.getContext("2d");
- Context.fillStyle="#f00";
- Context.fillReact(0,0,300,300);
看到上面的 2d, 你可能会幻还会有 3d, 其实是没有的, 仅此一种写法, 不过我相信以后经过各位大佬的努力会有的.
三, 画直线, 定义连接 节点
- Context.lineWidth=6;// 定义线条的宽度
- Context.strokeStyle="red";// 定义线条的颜色
- Context.moveTo(10,10);// 画图起始位置
- Context.lineTo(10,100);// 终止位置
- Context.lineTo("100,100");// 如果没有再次这只起始位置将从上一次的结束位置开始划线
- Context.stroke();// 开始划线
注意: 如果没有 stroke() 函数, 表示还没有画图终止, 会不显示的! 所以写完点必须加上 stroke().
四, 渐变色图形
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色.
以下是两种设置 canvas 的渐变:
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向 / 圆渐变
当我们使用渐变对象必须使用两种或两种以上的停止颜色时, 用 addColorStope() 方法制定颜色停止, 参数使用坐标来描述, 可以是 0 或 1.
使用渐变时, 设置 fillStyle 或 stroke 的值为渐变, 然后绘制形状.
- html>
- head>
- meta charset='utf-8'>
- title>title>
- head>
- body>
- canvas id='myCanvas' width='200' height='100' style='border:1px solid #d3d3d3;'>canvas>
- script>
- var c=document.getElementById('myCanvas');
- var ctx=c.getContext('2d');
- var grd=ctx.createLinearGradient(0,0,200,0);
- grd.addColorStop(0,'red');
- grd.addColorStop(1,'white');
- ctx.fillStyle=grd;
- ctx.fillRect(10,10,150,80);
- script>
- body>
- html>
图形为:
下面是一个使用 canvas 制作一个写字板的小例子:
先看一下:
来源: http://www.92to.com/bangong/2018/04-13/33562377.html