<canvas>HTML5剪切图片以及绘制文字第四篇
lucky.na是一个h5的初学者有很多东西都是在课本上看的和在博客上找的，以及自己的一点理解。再此感谢那些博主.谢谢你们
跟前面一样一大段代码来袭
html5部分
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script type="text/javascript" language="jscript" src="js6-13.js"></script> 7 </head> 8 9 <body onLoad="pageload();"> 10 <canvas id="cnvMain" width="500px" height="500px"></canvas> 11 </body> 12 </html>
js部分
1 // JavaScript Document 2 function $$(id){ 3 return document.getElementById(id); 4 5 } 6 function pageload(){ 7 8 var cnv=$$("cnvMain"); 9 var cxt=cnv.getContext("2d"); 10 11 var objImg=new Image(); 12 objImg.src="z2.jpg"; 13 objImg.onload=function(){ 14 drawCirc(cxt,60,true); 15 cxt.drawImage(objImg,0,0); 16 drawCirc(cxt,10,false); 17 18 } 19 20 } 21 //根据相关参数绘制圆 22 function drawCirc(cxt,intR,blnC){ 23 cxt.beginPath(); 24 cxt.arc(140,95,intR,0,Math.PI*2,true); 25 cxt.closePath(); 26 //设置边框颜色 27 cxt.strokeStyle="#666"; 28 //设置边框宽度 29 cxt.lineWidth=5; 30 //开始描边 31 cxt.stroke(); 32 if(blnC){ 33 //切割圆形 34 cxt.clip(); 35 }else{ 36 //设置填充色 37 cxt.fillStyle="#000"; 38 //填充图形 39 cxt.fill(); 40 } 41 42 }
步骤
创建一个Image对象，并设置该对象的加载路径。在加载图像过程中，第一次调用另外一个自定义函数drawcirc(),
1绘制一个圆形路径，并使用stroke方法绘制在画布中
2调用方法clip()将画布中的圆形路径进行切割
cxt表上下文环境对象
intR表半径
blnc表是否切割
3使用drawcircle（）在画布中绘制图像
4第二次调用drawcirc（）绘制一个小圆
onload在js中不太理解，哪位大神可以指点一下吗？
绘制文字
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script type="text/javascript" language="jscript" src="js6-14.js"></script> 7 </head> 8 9 <body onLoad="pageload();"> 10 <canvas id="cnvMain" width="280px" height="190px"></canvas> 11 </body> 12 </html>
1 // JavaScript Document 2 function $$(id){ 3 return document.getElementById(id); 4 } 5 //定义加载页面时调用的函数 6 function pageload(){ 7 var cnv=$$("cnvMain"); 8 var cxt=cnv.getContext("2d"); 9 drawText(cxt,"bold 35px impact",90,70,false); 10 drawText(cxt,"bold 35px arial blank",130,110,true); 11 drawText(cxt,"bold 35px comic sans ms",170,150,true); 12 } 13 //根据参数绘制不同类型的字体 14 function drawText(cxt, strFont,intX,intY,blnFill){ 15 cxt.font=strFont; 16 cxt.textAlign="center"; 17 cxt.textBaseline="bottom"; 18 if(blnFill){ 19 cxt.fillStyle="#ccc"; 20 cxt.fillText("HTML5",intX,intY); 21 22 }else{ 23 24 cxt.strokeStyle="#666"; 25 cxt.strokeText("HTMLLLL",intX,intY); 26 } 27 28 } 29
cxt ：表示上下文环境对象的名称
strFont：表示设置font属性值
intX：表示文字在左上角的横坐标
intY：表示文字在左上角的纵坐标
blnFill是否采用fill（）方法绘制字符。如果为true为是 false为stroke
效果图如下
