HTML+Css学习-------Canvas
<canvas>标签
有属性width/height可以用来设置宽高，
但是宽高默认为：300px * 150px (width * height)
javascript操纵：
getContext( "2d" )：获取CanvasRenderingContext2D对象。
校验兼容性：
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
简单的操作：
绘制矩形：
fillRect(x, y, width, height)
strokeRect(x, y, width, height)
clearRect(x, y, width, height)
rect(x, y, width, height)
//当调用该方法，moveTo()的自动调用，参数为(0,0)
路径：
beginPath()
closePath()
fill() //可以填充没有闭合的图形
stroke()
绘制圆形：
arc(x, y, radius, startAngle, endAngle, anticlockwise)
绘制Bezier and quadratic曲线：
quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
操纵图像：
首先创建图像对象：
var img = new Image(); // Create new img element
img.src = '1.png'; // Set source path
或者引用图像对象
然后使用
drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
注意：要在图片加载完后使用：
var img = new Image(); // Create new img element
img.addEventListener("load", function() {
// execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path
使用style和color
fillStyle = color/gradient object/pattern object
strokeStyle = color/gradient object/pattern object
默认情况下：color为：black
透明度：
globalAlpha：设置当前的透明度
rgba(255,0,0,0.5)：使用rgba来设置透明度，最后一个参数（0-1）
style：
lineWidth = value //值必须是正数，默认值为1
lineCap = type //but , round , square
lineJoin = type //miter , round , bevel
miterLimit = value
gradient：
createLinearGradient(beginX, beginY, endX, endY)
createRadialGradient(beginX, beginY, r1, endX, endY, r2)
可以通过 addColorStop()为渐变分配颜色
gradient.addColorStop(position, color)
pattern：
createPattern(image, type)
type：repeat，x-repeat，y-repeat，no-repeat
shadow：
shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
//上面3个属性的值不会受变换矩阵的影响，默认为0
shadowColor = <color>
坐标变换：
save()
restore()
translate：translate(x, y)
rotating：rotate(angle)
scaling：scale(x, y)
transform：transform(m11, m12, m21, m22, dx, dy)
setTransform(m11, m12, m21, m22, dx, dy)
图像组合：
composition：globalCompositeOperation = type
clip()
图像动画：
animation：
基本步骤：Clear the canvas
Save the canvas state
Draw animated shapes
Restore the canvas state
文字：
填充文字：fillText(string,x,y[,MaxWidth])
绘制轮廓：strokeText(string,x,y[,MaxWidth])
属性：
font
textAlign
textBaseline
测量文字宽度：
获取measureText对象，
使用width属性来获取宽度。