标签：
好久不碰前端了,好多都忘了,但是一直很想学canvas.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
一:基本代码
html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="320" height="480"></canvas>
<script src="canvas.js"></script>
<link href="canvas.css" rel="stylesheet">
</body>
</html>javascript:
function draw() {
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
}
}
1.绘制正方形：
fillRect(x, y, width, height):
绘制“已填色”的矩形。默认的填充颜色是黑色。
利用fillStyle填充颜色strokeRect(x, y, width, height)
绘制矩形（不填色）。笔触的默认颜色是黑色
使用 strokeStyle 属性来设置笔触的颜色、渐变或模式
context.strokeRect(x,y,width,height);clearRect(x, y, width, height)
清空给定矩形内的指定像素2.绘制路径
Drawing paths
beginPath()
Starts a new path by emptying the list of sub-paths
moveTo()
Moves the starting point of a new sub-path to the (x, y) coordinates.
bezierCurveTo()
贝塞尔曲线
quadraticCurveTo()
二次贝塞尔曲线
arc()
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);arcTo()
ctx.arcTo(x1, y1, x2, y2, radius);ellipse()画椭圆弧函数
绘图色画一椭圆弧。
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
rotation
The rotation for this ellipse, expressed in radians.
旋转 这个椭圆的旋转，以弧度表示。
anticlockwise:true 逆时针；false,顺时针rect()
rect(x, y, width, height);**closePath()要写的，最后一个点连接到起始点，不写就不连接**标签：
原文地址：http://blog.csdn.net/u014373031/article/details/51296845
