canvas学习总结 - jackyWHJ_H5之家 - 中国HTML5教程资源分享第一站

最近学习了下canvas，然后觉得几个简单的方法应该记下了，然后就画了这样一个东西

源码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas summary</title>

<body>
<canvas id="canvas" width="400" height="700">
Canvas not supported
</canvas>
<script src="Summary.js"></script>
</body>
</html>

Summary.js源码：

/**
* Created by haojie.wang on 14-2-26.
*/
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');

//Function -----------------------------------------------------------------------
/**
* 画线
* */
function drawLine(){
context.beginPath();
context.strokeStyle = "#FF0000";//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
context.moveTo(50,30);
context.lineTo(context.canvas.width - 50,30);
context.stroke();
}
/**
* 画圆
* */
function drawCircle(x,y,r){
context.beginPath();
context.strokeStyle = "#000000";
context.arc(x,y,r,0,Math.PI*2,false);//arc() 方法创建弧/曲线（用于创建圆或部分圆）,其中，x为圆的中心的 x 坐标。
// y为圆的中心的 y 坐标。r为圆的半径。
// sAngle为起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
//eAngle为结束角，以弧度计。
// counterclockwise 可选。规定应该逆时针还是顺时针绘图。 False = 顺时针，true = 逆时针。
context.stroke();
}
/**
* 画圆点
* */
function drawSolidCircle(x,y,r){
context.beginPath();
context.fillStyle = "#FF0000";// fillStyle属性设置或返回用于填充绘画的颜色、渐变或模式
context.arc(x,y,r,0,Math.PI*2,false);
context.fill();
}
/**
* 画矩形
* */
function drawRect(x,y,width,height){
context.beginPath();
context.fillStyle = "#FF0000";
context.rect(x,y,width,height);
context.fill();
}
/**
* 画带弧角矩形
* */
function drawRoundedRect(cornerX, cornerY, width, height, cornerRadius) {
context.beginPath();

if (width > 0) context.moveTo(cornerX + cornerRadius, cornerY);
else context.moveTo(cornerX - cornerRadius, cornerY);

//这个方法为当前的子路径添加了一条圆弧，但是，它所描述的这条圆弧和 arc() 方法所描述的圆弧大不相同。
// 添加给路径的圆弧是具有指定 radius 的圆的一部分。
// 该圆弧有一个点与当前位置到 P1 的线段相切，还有一个点和从 P1 到 P2 的线段相切。
// 这两个切点就是圆弧的起点和终点，圆弧绘制的方向就是连接这两个点的最短圆弧的方向。
// 在很多常见的应用中，圆弧开始于当前位置而结束于 P2，但情况并不总是这样。
// 如果当前的位置和圆弧的起点不同，这个方法添加了一条从当前位置到圆弧起点的直线。
// 这个方法总是将当前位置设置为圆弧的终点。
context.arcTo(cornerX + width, cornerY,cornerX + width, cornerY + height,cornerRadius);
context.arcTo(cornerX + width, cornerY + height, cornerX, cornerY + height,cornerRadius);
context.arcTo(cornerX, cornerY + height,cornerX, cornerY,cornerRadius);

if (width > 0) {
context.arcTo(cornerX, cornerY,cornerX + cornerRadius, cornerY,cornerRadius);
}
else {
context.arcTo(cornerX, cornerY,cornerX - cornerRadius, cornerY,cornerRadius);
}
context.strokeStyle = "#000000";
context.fillStyle = "#FF0000";

context.stroke();
context.fill();
}
/**
* 画矩形，填充渐变色
* */
function drawRectFillWithGradient(x,y,width,height){
//createLinearGradient() 方法创建放射状/圆形渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。
//x0 渐变的开始圆的 x 坐标
// y0 渐变的开始圆的 y 坐标
// r0 开始圆的半径
// x1 渐变的结束圆的 x 坐标
// y1 渐变的结束圆的 y 坐标
// r1 结束圆的半径
var gradient = context.createRadialGradient(x+width/2, y, width/2,x+width/2,y+height, width/3);

gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'yellow');
context.beginPath();
context.fillStyle = gradient;
context.rect(x,y,width,height);
context.fill();
}
/**
* 画文字标签
* */
function drawText(text,x,y,textAlign,isFill){
context.beginPath();
context.fillStyle = "#0000FF";
context.font = 'italic bold 30px sans-serif'
context.textAlign = textAlign;
if(isFill){
context.fillText(text,x,y);
context.fill();
}
else{
context.strokeText(text,x,y);
context.stroke();
}
}

//Initialization ------------------------------------------------------------------------------------------