安卓鸟学Html5 之Canvas绘图实践一
前言
预言帝乔布斯说HTML5将会改变互联网的生态环境，自从2014年html5的火爆然后对移动开发者是一个冲击，很多公司纷纷转战HTML5个人觉得对我们是一个考验，然后有朋友去面试直接问会nodejs不，然后 也有朋友转成hybird开发了，说实在的用ionic和angularjs真心不会，压力大的一逼。
以前也写过一篇html5的，但是发现东西还是相当多的，所以这里还是使用canvas来一步步重新学习，既然安卓自定义控件离不开canvas那么html5的canvas同样很重要。
Html5概述
Html5也是支持W3C的规范标准的，所以学起来还是可以的。可以去参考 html5教程：http://www.w3school.com.cn/html5/
HTML5是HTML标准的下一个版本。虽然HTML5没有完全颠覆HTML4，但是它们也有一些不同最新最全的HTML5-HTML4对比信息请看http://dev.w3.org/html5/html4-differences/
1. 简化的语法
HTML5简化了很多细微的语法，例如doctype的声明，你只需要写!doctype html就行了。HTML 5 指定 UTF-8 编码的方式如下meta charset=”UTF-8”
2. canvas标签替代Flash
Flash给很多Web开发者带来了麻烦，要在网页上播放Flash需要一堆代码和插件。canvas标签使得开发者只要使用一个标签就能和用户产生UI交互。
3 新增许多标签,也废弃了很多标签
4. 全新的表单
5.HTML5 支持了不同类型的存储类型
HTML5 支持本地存储，在之前版本中是通过 Cookie 实现的。HTML5 本地存储速度快而且安全。并且HTML5有两种不同的对象可用来存储数据，HTML5通过JS来存储和访问数据：
localStorage 适用于长期存储数据，浏览器关闭后数据不丢失
sessionStorage 只是针对一个session的数据存储，存储的数据在浏览器关闭后自动删除
总的来说，HTML5已经超越了标记语言的范畴，更富语义的标签将使得HTML5更有用处。Canvas+WEBGL等技术，实现无插件的动画以及图像、图形处理能力；本地存储，可实现offline应用；websocket，一改http的纯pull模型，实现数据推送的梦想；MathML，SVG等，支持更加丰富的render等等等等，现在对于对HTML5的了解还只停留在表面阶段，以后会多阅读一部分HTML5的书籍增加一下见识。
Canvas使用
为什么挑canvas来讲？
一般的标签还是没有什么好介绍的，我们还是来学习一些新标签，然后canvas也是安卓的重要东西，所以我们学起来也顺手点。
HTML5 canvas 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，canvas 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。提供 getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
canvas初始化
<canvas id="canvas" width="800" height="300" style="background-color: aqua;align-content: center">
你的浏览器暂不支持Canvas,请更换浏览器后再试
</canvas>
<script> window.onload=function(){ var canvas=document.getElementById("canvas") canvas.width=800 canvas.height=300 var context=canvas.getContext("2d") } </script>可以看出我们的canvas对象是从document取出来的，而且必须是ElementById，用ElementsByName是没有效果的（故意试了下），然后canvas就是一个画布，画东西必须是在javaScript里面并且是context来操作。
draw one Line
draw 直线
context.moveTo(100,100)//把画笔移到这个位置
context.lineTo(300,200)//把画笔与此位置连接
context.stroke()//画
canvas是基于状态的绘制，我们可以改变画笔的属性（宽度，颜色）。
context.lineWidth=8
context.strokeStyle="#578"strokeStyle和fillStyle设置的值：
ffffff
642
rgb( 255 , 128 , 0 )
rgba( 100 , 100 , 100 , 0.8 )
hsl( 20 , 62% , 28% )
hsla( 40 , 82% , 33% , 0.6 )
red
接下来我们来改变形状：
var canvas=document.getElementById("canvas")
canvas.width=800
canvas.height=300
var context=canvas.getContext("2d")
context.lineWidth=30
context.moveTo(100,100)
context.lineTo(190,200)
context.lineCap="butt"
context.stroke()
context.beginPath()
context.moveTo(400,210)
context.lineTo(250,100)
context.lineCap="round"
context.stroke()
context.beginPath()
context.moveTo(600,200)
context.lineTo(300,280)
context.lineCap="square"
context.stroke()
draw 折线
context.lineWidth=10
context.moveTo(100,100)
context.lineTo(190,200)
context.lineTo(100,290)
context.lineTo(600,290)
context.stroke()通过lineTo不断改变位置，连接起来就是直线。
draw more line
使用
context.beginPath()//新路径
context.closePath()//自动封闭路劲
context.lineWidth=10
context.moveTo(100,100)
context.lineTo(190,200)
context.lineTo(190,100)
context.strokeStyle="blue"
context.stroke()
context.moveTo(300,100)
context.lineTo(390,200)
context.lineTo(390,100)
context.strokeStyle="red"
context.stroke()
context.moveTo(500,100)
context.lineTo(590,200)
context.lineTo(590,100)
context.strokeStyle="green"
context.stroke()
你是不是发现虽然生成了3条折线，但是好像颜色都被最后一个颜色属性覆盖了，所以就要使用beginPath()
context.lineWidth=10
context.moveTo(100,100)
context.lineTo(190,200)
context.lineTo(190,100)
context.strokeStyle="blue"
context.stroke()
context.beginPath()
context.moveTo(300,100)
context.lineTo(390,200)
context.lineTo(390,100)
context.strokeStyle="red"
context.stroke()
context.beginPath()
context.moveTo(500,100)
context.lineTo(590,200)
context.lineTo(590,100)
context.strokeStyle="green"
context.stroke()
然后你会发现使用了beginPath()后，moveTo()变成lineTo()后效果也是一样。
draw封闭图形
想当然的把首尾坐标弄一样，就是封闭图形，结果还是有点小问题：
context.lineWidth=20
context.moveTo(400,350)
context.lineTo(200,150)
context.lineTo(600,150)
context.lineTo(400,400)
context.lineTo(500,200)
context.lineTo(400,350)
context.strokeStyle="green"
context.stroke()
看见没有，有个小缺口，然后解决的办法就是使用 context.closePath()代替 context.lineTo(400,350)
画五角星
实现思路：
代码实现：
function drawStar(ctx,r,R,x,y,rotaion){
ctx.beginPath()
for(var i =0 ;i<5;i++){
ctx.lineTo(Math.cos((18+i*72-rotaion)/180*Math.PI)*R+x,Math.sin((18+i*72-rotaion)/180*Math.PI)*R+y)
ctx.lineTo(Math.cos((54+i*72-rotaion)/180*Math.PI)*r+x,Math.sin((54+i*72-rotaion)/180*Math.PI)*r+y)
}
ctx.closePath()
ctx.fillStyle="orange"
ctx.fill()
}
window.onload=function(){
var canvas=document.getElementById("canvas")
canvas.width=400
canvas.height=400
var context=canvas.getContext("2d")
context.lineWidth=2
drawStar(context,100,200,200,200,0)
}效果：
根据相同的原理，我们可以画出不同的多边形效果：
我们从割圆术的方法可以看出多边形都是根据圆心的角度来确定坐标，所以推出规律
var deg=2*Math.PI/lines //角度等于2pi/边数
var x=Math.sin(i*deg);//横坐标
var y=-Math.cos(i*deg);//纵坐标
然后我们就不难画出多边形效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义边数和旋转角度</title>
</head>
<body>
<canvas id="slef_line" width="400" height="400" style="border: 1px #ccc solid;">你这渣渣浏览器居然不支持canvas</canvas>
<script> window.onload =function(){ var canvas=document.getElementById("slef_line") var context=canvas.getContext("2d") canvas.width=400 canvas.height=400 context.translate(200,200);//起始点移动到200,200位置 drawMoreLine(context,6,80,80,20) } /** * context,边数，x方向长度，y方向长度，旋转角度 */ function drawMoreLine(context,lines,width,height,rotation){ var deg=2*Math.PI/lines context.beginPath() for(var i=0;i<lines;i++){ var x=Math.sin(i*deg-rotation); var y=-Math.cos(i*deg-rotation); context.lineTo(x*width,y*height); } context.closePath(); context.fillStyle="green" context.fill() context.restore(); } </script>
</body>
</html>效果呢：
1.六边形
2.十二边形
drawMoreLine(context,12,80,80,20)
3.三角形
drawMoreLine(context,3,80,80,20)
总结：
本篇主要使用canvas的画线功能，然后之前呢也写过Html5 的canvas使用，好久了，这一次记录了一下容易出问题的地方，也是更加详细的去介绍Html5 的Canvas标签。