http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16
http://bbs.csdn.net/topics/390582151 html5 canvas 实现液体效果 2016-5-11
CANVAS学习笔记，小函数整理：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<h3>canvas学习笔记、小函数整理</h3>
<div style="position:relative;width:500px;height:400px;margin:0px;padding:0px;border:1px solid #999;">
<div style="position:absolute;padding:10px;background:rgba(128,128,128,0.5);bottom:0px;z-index:1">这里写字啦。。。。。。。</div>
<canvas id="canvas" width="500" height="400" style="position:absolute;margin:5px;z-index:0"></canvas>
</div> 或
<canvas id="canvas2" width="500" height="400" style="border:1px solid #999;padding:5px;"></canvas> <script type="text/javascript">
$(function(){ //画方形
function fang_fill(id,color,x,y,width,height) {
var canvas = document.getElementById(id)
if (canvas == null){return false;}
var context = canvas.getContext("2d");
context.fillStyle = color; //"rgba(255,0,0,0.2)";
context.fillRect(x,y,width,height);
}
//画方形框
function fang_border(id,color,x,y,width,height,borderWidth) {
var canvas = document.getElementById(id)
if (canvas == null){return false;}
var context = canvas.getContext("2d");
context.lineWidth = 1;
context.strokeStyle = color;
context.strokeRect(x,y,width,height);
} //画圆形
function circle_fill(id,color,x,y,r) {
var canvas = document.getElementById(id)
if (canvas == null){return false;}
var context = canvas.getContext('2d');
context.beginPath();
context.arc(x,y,r,0,Math.PI * 2, true);
context.closePath();
context.fillStyle = color;
context.fill(); }
//画扇形（未写好）
function fan_fill(id,color,x,y,r,jiao) {
var canvas = document.getElementById(id)
if (canvas == null){return false;}
var context = canvas.getContext('2d');
context.beginPath();
context.lineTo(x,y);
context.arc(x,y,r,0,Math.PI * jiao, true);
context.lineTo(x,y);
context.closePath();
context.fillStyle = color;
context.fill();
} //画五星
function drawStar(id,color,x,y,r) {
var canvas = document.getElementById(id)
if (canvas == null){return false;}
var context = canvas.getContext('2d');
context.lineWidth = 5;
context.beginPath();
var dit = Math.PI * 4 / 5;
var sin = Math.sin(0) * r + y;
var cos = Math.cos(0) * r + x;
console.log(0+":"+0);
context.moveTo(cos, sin);
for (var i = 0; i < 5; i++) {
var tempDit = dit * i;
sin = Math.sin(tempDit) * r + y;
cos = Math.cos(tempDit) * r + x;
context.lineTo(cos, sin);
console.log(sin+":"+sin+":"+tempDit);
}
context.closePath();
context.strokeStyle = "red";
context.fillStyle = color;
context.fill();
} //画渐变(y方向)
function gradient_y(id,color1,color2,x,y,width,height){
var canvas = document.getElementById(id)
if (canvas == null){return false;}
var context = canvas.getContext('2d');
var g1 = context.createLinearGradient(x,y,x,(y+height));
g1.addColorStop(0,color1);
g1.addColorStop(1,color2);
context.fillStyle = g1;
context.fillRect(x,y,width,height);
}
//画渐变(x方向)
function gradient_x(id,color1,color2,x,y,width,height){
var canvas = document.getElementById(id)
if (canvas == null){return false;}
var context = canvas.getContext('2d');
var g1 = context.createLinearGradient(x,y,(x+width),y);
g1.addColorStop(0,color1);
g1.addColorStop(1,color2);
context.fillStyle = g1;
context.scale(0.5, 0.5);
context.rotate(Math.PI / 4);
context.translate(100, 100);
context.fillRect(x,y,width,height);
} //填充文字
function font_fill(id,txt,x,y){
var canvas = document.getElementById(id)
if (canvas == null){return false;}
var context = canvas.getContext("2d");
context.fillStyle = "#00f";
context.font = "40px 微软雅黑";
//context.textBaseline = 'top';
context.fillText(txt,x,y); }
//填充文字边框
function font_border(id,txt,x,y){
var canvas = document.getElementById(id)
if (canvas == null){return false;}
var context = canvas.getContext("2d");
context.font = "100px 微软雅黑";
length = context.measureText(txt);
context.strokeText(txt,x,y); } //保存和恢复状态 （抄的）
function draw18(id) {
var canvas = document.getElementById(id)
if (canvas == null){return false;}
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.save(); //保存了当前context的状态
context.fillStyle = "black";
context.fillRect(0, 0, 100, 100);
context.restore();//恢复到刚刚保存的状态
context.fillRect(0,120,100,100);
}
//保存文件 canvas.toDataURL(MIME) （抄的）
function draw19(id) {
var canvas = document.getElementById(id)
if (canvas == null){return false;}
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0,0,225)";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(255,255,0)";
context.fillRect(10, 20, 50, 50);
//把图像保存到新的窗口
var w=window.open(canvas.toDataURL("image/jpeg"),"smallwin","width=400,height=350");
} //function example(id,color1,color2,x,y,width,height){//
//context.scale(0.5, 0.5); //缩放
//context.rotate(Math.PI / 4); //旋转
//context.translate(100, 100); //平移
//context.fillRect(x,y,width,height);
//} //例子代码：
//fang_fill("canvas","#f90",10,10,100,100);
//fang_border("canvas","#f90",8,8,104,104);
//circle_fill("canvas","#a9f",150,150,100);
//fan_fill("canvas","#a9f",150,150,100,1/2);
//drawStar("canvas","#f00",100,100,50);
//gradient_y("canvas","#600","#f00",100,50,200,40);
//gradient_y("canvas","#999","#eee",100,100,200,40);
//gradient_x("canvas","#ff0","#f00",100,150,400,40);
font_fill("canvas","啊啊啊啊啊啊啊啊",0,100);
font_border("canvas","呃呃呃呃",120,130); });
</script>
</body>
</html>
划线：
//画线
function line_stroke(id,color,x,y,end_x,end_y) {
var canvas = document.getElementById(id)
if (canvas == null){return false;}
var context = canvas.getContext("2d");
context.beginPath();//画一条新的线段
context.strokeStyle = color;
context.moveTo(x,y);
context.lineTo(end_x,end_y);
context.stroke();
}
line_stroke("canvas","#f90",10,10,100,100);