Canvas -画图
<!doctypehtml> <html> <head> <title> </title> </head> <style> </style> <body> <canvaswidth=="500"height="500"id="demo"> 您的浏览器不支持canvas！ </canvas> <script> varcanvas=document.getElementById('demo'); //alert(canvas); varctx=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画文字实例：<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>Canvas</title>
</head>
<styletype="text/css">
body{margin:20pxauto;padding:0;width:800px;}
canvas{border:dashed2px#CCC}
</style>
<scripttype="text/javascript">
function$$(id){
returndocument.getElementById(id);
}
functionpageLoad(){
varcan=$$('can');
varcans=can.getContext('2d');
cans.font='bold144pxconsolas';
cans.textAlign='left';
cans.textBaseline='top';
cans.strokeStyle='#DF5326';
cans.strokeText('Hello',100,100);
cans.font='bold144pxarial';
cans.fillStyle='red';
cans.fillText('World',300,300);
}
functionimg_click(){
varcan=$$('can');
varcans=can.getContext('2d');
cans.clearRect(0,0,800,600);
}
</script>
<bodyonload="pageLoad();">
<canvasid="can"width="800px"height="600px"onclick="img_click(this);"></canvas>
</body></html>Canvas图像切割<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>Canvas</title>
</head>
<styletype="text/css">
body{margin:20pxauto;padding:0;width:800px;}
canvas{border:dashed2px#CCC}
</style>
<scripttype="text/javascript">
function$$(id){
returndocument.getElementById(id);
}
functionpageLoad(){
varcan=$$('can');
varcans=can.getContext('2d');
varobjImg=newImage();
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();
}
functionimg_click(){
varcan=$$('can');
varcans=can.getContext('2d');
cans.clearRect(0,0,800,600);
}
</script>
<bodyonload="pageLoad();">
<canvasid="can"width="800px"height="600px"onclick="img_click(this);"></canvas>
</body></html>注：切出来的图是圆形的。案例2：
<!DOCTYPEhtml><html>
<head>
<metacharset="utf-8">
<title>Canvas</title>
</head>
<styletype="text/css">
body{margin:20pxauto;padding:0;width:800px;}
canvas{border:dashed2px#CCC}
</style>
<scripttype="text/javascript">
function$$(id){
returndocument.getElementById(id);
}
functionpageLoad(){
varcan=$$('can');
varcans=can.getContext('2d');
varobjImg=newImage();
objImg.src='lin.jpg';
objImg.onload=function(){
cans.drawImage(objImg,500,400,500,400,100,100,500,400);
}
}
</script>
<bodyonload="pageLoad();">
<canvasid="can"width="800px"height="600px"onclick="img_click(this);"></canvas>
</body></html>
注：切出来的图是正方形的。CanvasApi参考博文：/content/3818171.html
猜你在找
相关文章
精彩导读
热门资讯
关注我们
