HTML5新增组件--canvas的面纱
Posted Java引导者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5新增组件--canvas的面纱相关的知识，希望对你有一定的参考价值。
canvas介绍
Canvas是html5新增的组件，用于在网上绘制图形，该元素标签的强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值。但canvas本身没有绘图能力的，它就像一块幕布，可以用js在上面绘制各种图表、动画等。
在没有Canvas的年代，绘图只能借助Flash插件来实现，页面不得不用javascript和Flash进行交互。有了canvas，我们就不需要Flash了，直接用JavaScript就可以完成绘制。
canvas用法
<canvas id=”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的值为渐变，然后绘制形状。
<!DOCTYPE html>
<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制作一个写字板的小例子：
先看一下：
以上是关于HTML5新增组件--canvas的面纱的主要内容，如果未能解决你的问题，请参考以下文章