1 <meta charset='utf-8' /> 2 <style> 3 #canvas{ 4 border:1px dashed #aaa; 5 } 6 </style> 7 <script> 8 window.onload = function(){ 9 var oCanvas = document.querySelector( "#canvas" ), 10 oGc = oCanvas.getContext( '2d' ), 11 width = oCanvas.width, height = oCanvas.height; 12 13 oGc.beginPath(); 14 oGc.rect( 10, 10, 150, 150 ) 15 oGc.closePath(); 16 17 oGc.clip(); oImg = new Image(); 20 oImg.src = './img/mv.jpg'; 21 oImg.onload = function(){ 22 oGc.drawImage( oImg, 0, 0 ); 23 } 24 } 25 </script> 26 </head> 27 <body> 28 <canvas></canvas> 29 </body>
用canvas裁剪的图案，填充canvas
1 <meta charset='utf-8' /> 2 <style> 3 #canvas { 4 border: 1px dashed #aaa; 5 } 6 </style> 7 <script> 8 window.onload = function () { 9 var oCanvas = document.querySelector("#canvas"), 10 oGc = oCanvas.getContext('2d'), 11 width = oCanvas.width, height = oCanvas.height; oNewCanvas = document.createElement( "canvas" ); 14 oNewCanvas.width = 200, 15 oNewCanvas.height = 200, 16 oNewGc = oNewCanvas.getContext( '2d' ); 17 18 oNewGc.beginPath(); 19 oNewGc.arc(100, 100, 100, 0, 360 * Math.PI / 180, false); 20 oNewGc.closePath(); 21 22 oNewGc.clip(); oImg = new Image(); 25 oImg.src = './img/mv.jpg'; oNewGc.drawImage(oImg, 0, 0); 28 var pattern = oGc.createPattern( oNewCanvas, 'repeat' ); 29 oGc.fillStyle = pattern; 30 oGc.fillRect( 0, 0, width, height ); 31 } 32 } 33 34 </script> 35 </head> 36 37 <body> 38 <canvas></canvas> 39 </body>
相关文章![[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法 - ghostwu](/images/defaultpic.gif)
![[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API - ghostwu](/upload8/allimg/170930/0P1291048_lit.png)
![[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明) - ghostw](/upload8/allimg/170929/1P134DA_lit.png)
精彩导读
热门资讯
关注我们
