Canvas -画图
2014-09-30 09:14:57
<!doctype html> <html> <head> <title> </title> </head> <style> </style> <body> <canvas width=="500" height="500" id="demo"> 您的浏览器不支持canvas！ </canvas> <script> var canvas = document.getElementById('demo'); // alert(canvas); var ctx = canvas.getContext('2d'); //alert(ctx) ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(200,10); ctx.closePath(); ctx.stroke(); //end ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(100,70); ctx.closePath(); ctx.stroke(); //end ctx.beginPath(); ctx.moveTo(200,10); ctx.lineTo(290,60); ctx.closePath(); ctx.stroke(); //end ctx.beginPath(); ctx.moveTo(100,70); ctx.lineTo(290,60); ctx.closePath(); ctx.stroke(); //end ctx.beginPath(); ctx.arc(150, 100, 50, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke(); //左空心眼睛 ctx.beginPath(); ctx.arc(120, 100, 10, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke(); //右空心眼睛 ctx.beginPath(); ctx.arc(150, 100, 10, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke(); //右实心眼睛 ctx.beginPath(); ctx.arc(150, 100, 3, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.fillStyle = "#000000"; ctx.fill(); ctx.shadowOffsetX = 0; // 设置水平位移 ctx.shadowOffsetY = 0; // 设置垂直位移 ctx.shadowBlur = 10; // 设置模糊度 ctx.shadowColor = "rgba(0,0,0,1)"; // 设置阴影颜色 ctx.closePath(); ctx.stroke(); //左实心眼睛 ctx.beginPath(); ctx.arc(120, 100, 3, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.strokeStyle = "#000"; ctx.fill(); ctx.shadowOffsetX = 0; // 设置水平位移 ctx.shadowOffsetY = 0; // 设置垂直位移 ctx.shadowBlur = 10; // 设置模糊度 ctx.shadowColor = "rgba(0,0,0,1)"; // 设置阴影颜色 ctx.closePath(); ctx.stroke(); //嘴 ctx.beginPath(); ctx.arc(135 , 130, 10, 10, false); ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke(); //线 帽子线 ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(20,100); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(100,70); ctx.lineTo(100,150); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(200,10); ctx.lineTo(200,100); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(290,60); ctx.lineTo(290,130); ctx.closePath(); ctx.stroke();
//弧线 开始
- context.arc(x, y, r, startAngle, endAngle, anticlockwise) //语法
其中：
x 代表圆心横坐标
y 代表圆心纵坐标
r 代表弧半径
startAngle 代表起始弧度
endAngle 代表结束弧度
anticlockwise 代表弧的方向，true为逆时针，false为顺时针
//弧线 end
ctx.beginPath();
ctx.arc(300, 300, 130, 310, Math.PI, false);
ctx.strokeStyle = '#000';
ctx.stroke();
ctx.closePath();
</script>
</body>
</html>
Canvas 画文字实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<style type="text/css">
body{margin:20px auto; padding:0; width:800px; }
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.font = 'bold 144px consolas';
cans.textAlign = 'left';
cans.textBaseline = 'top';
cans.strokeStyle = '#DF5326';
cans.strokeText('Hello', 100, 100);
cans.font = 'bold 144px arial';
cans.fillStyle = 'red';
cans.fillText('World', 300,300);
}
function img_click(){
var can = $$('can');
var cans = can.getContext('2d');
cans.clearRect(0,0,800,600);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>
</body>
</html>
Canvas 图像切割
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<style type="text/css">
body{margin:20px auto; padding:0; width:800px; }
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
var objImg = new Image();
objImg.src = 'lin.jpg';
objImg.onload = function (){
cans.drawImage(objImg,0,0,800,600);
}
cans.beginPath();
cans.arc(400,300,200,0,Math.PI*2,1);
cans.closePath();
cans.clip();
}
function img_click(){
var can = $$('can');
var cans = can.getContext('2d');
cans.clearRect(0,0,800,600);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>
</body>
</html>
注： 切出来的图是圆形的。
案例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<style type="text/css">
body{margin:20px auto; padding:0; width:800px; }
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
var objImg = new Image();
objImg.src = 'lin.jpg';
objImg.onload = function (){
cans.drawImage(objImg,500,400,500,400,100,100,500,400);
}
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>
</body>
</html>
注： 切出来的图是正方形的。
Canvas Api
http://javascript.ruanyifeng.com/htmlapi/canvas.html
参考博文：http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html
http://www.vaikan.com/html-5-canvas-tutorial-displaying-images/
人如代码，规矩灵活；代码如诗，字句精伦。
