简单了解canvas
1.什么是canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
版本支持：IE9以上
如果实在需要在IE9以前使用，可以查看 Exprorer Canvas Project和其他类似项目，通过插件来实现
注：canvas不是矢量图
2.canvas的作用
一些可能的用途，包括使用Canvas构造图形，动画，游戏和图片
当然也包括热工艺图。
3.我们为什么要使用canvas
性能，酷炫，还有什么好说的
1.只用一个 Canvas DOM 元素，降低 DOM 数量与渲染的复杂度，可以将原来 CPU 密集型变成 GPU 操作。
2.充分利用硬件资源的能力。
3.Canvas画布无论是 JavaScript & H5，还是native都有类似的 API。因此我可以把浏览器Canvas接口的反射到用native画布上，以此提高性能。
canvas初识
1.在web页面增加画布
在html页面中增加
注意：canvas宽高可以通过css设置，但是不建议，因为如果之前设置了标签样式，再设置css样式会把canvas图像扯变形
例如：
JS Bin
2.如何看到画
除非你在画布上设置了内容，否则你是看不见它的，会默认为透明色
JS Bin
3.在画布上绘图
将画布放置在x=10,y=10的位置建立一个宽高100的矩形
4.一个小小的画布测试
JS Bin
我们打算画一个随机生成的圆饼
建立一个表单去控制canvas输出的图像
准备工作
MDN canvas API
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
http://dev.w3.org/html5/2dcontext/
1.首先，建立HTML
JS Bin
2.然后增加form
3.用js做计算
创建一个hehe.js文件
window.onload = function() {
var button = document.getElementById('previewButton')
button.onclick = previewHandler;
}
function previewHandler() {
var canvas = document.getElementById('hehe');
var context = canvas.getContext('2d');
var selectObj = document.getElementById('shape');
var index = selectObj.selectedIndex;
var shape = selectObj[index].value;
if(shape === "squares"){
for(var squares = 0; squares < 20; squares++){
drawSquare(canvas, context)
}
}
}
4.编写drawSquare函数
function drawSquare(canvas, context){
var w = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.fillStyle = 'lightblue'
context.fillRect(x, y, w, w)
}
5.试试效果
6.增加backgroundColor调用
function fillBackgroundColor(canvas, context){
var selectObj = document.getElementById('backgroundColor');
var index = selectObj.selectedIndex;
var bgColor = selectObj.options[index].value
context.fillStyle = bgColor;
context.fillRect(0, 0, canvas.width, canvas.height)
}
7.奇怪的绘制
画一个简单的三角形
context.beginPath();//开始
context.moveTo(100, 150);////第一次的moveTo指的是将画笔落到指定的位置
context.lineTo(250,75)
context.lineTo(125,30)
context.closePath();//结束
context.stroke();//描绘
//context.fillStyle='red'
//context.fill();
8.分解arc
圆的方法:
context.arc(x, y, radius, startAngle, endAngle, direction)
x和y 参数是来确定圆心在画布上的位置
radius用来指定圆的半径
direction指定圆弧是逆时针还是顺时针，布尔值，true为逆时针，false为顺时针
startAngle 和 endAngle 是圆弧的起始角和 终止角
注意：角可以按负方向（从X轴逆时针）度量，也可以按正方向（从X轴顺时针）度量
9.浅尝弧线的使用
context.beginPath();
context.arc(70,70,60,0, (270 * Math.PI)/180, true)
//等于context.arc(70,70,60,0, (-90 * Math.PI)/180, true)
context.stroke()
起始角X轴与弧线终点之间的角，由于我们的弧是一个90°的弧，所以终止角为270°（注意：如果是按照负值或者逆时针方向来度量，那么终止角就是-90°）
10.度与弧度
360度 = 2PI弧度
11.再来编写圆代码
if(shape === "circles"){
for(var circle = 0; circle < 20; circle++){
drawCircle(canvas, context)
}
}
12.编写drawCircle函数
function drawCircle(canvas, context){
var radius = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.beginPath();
context.arc(x, y, radius, 0 , 2 * Math.PI, true);
context.fillStyle = 'lightblue'
context.fill();
context.stroke()
}
13.完成drawText函数
function drawText(canvas, context){
var selectObj = document.getElementById('foregroundColor');
var index = selectObj.selectedIndex;
var fgColor = selectObj[index].value;
context.fillStyle = fgColor;
context.font = 'bold 1em sans-serif'
context.textAligh = 'left'
context.fillText('在画布上不知道写什么...呵呵', 20, 40)
}
14.搞定
JS Bin