HTML5 Canvas来绘制图形-H5教程_H5之家 - 中国HTML5教程资源分享第一站

HTML5 Canvas来绘制图形-H5教程

来源： H5程序员 2017-10-31 20:44浏览(14)

以上效果图的代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jquery-1.12.4.min.js"></script> <script> $(function(){ var options = new Array( "source-atop", "source-in", "source-out", "source-over", "destination-atop", "destination-in", "destination-out", "destination-over", "lighter", "copy", "xor" ); var str=""; for(var i=0;i<options.length;i++){ str = "<p id='p_"+i+"' style='float:left'>"+options[i]+"<br/> <canvas id='canvas"+i+"' width='120px' height='100px' style='border:1px solid #ccc;margin:10px 2px 20px;'> </canvas></p>"; $("body").append(str); var cas = document.getElementById('canvas'+i); var ctx = cas.getContext('2d'); ctx.fillStyle = "orange"; ctx.fillRect(10,10,50,50); ctx.globalCompositeOperation = options[i]; ctx.beginPath(); ctx.fillStyle = "pink"; ctx.arc(50,50,30,0,2*Math.PI); ctx.fill(); } }) </script> </head> <body></body> </html>

图形合成

9、给图形绘制阴影

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas基础api</title> <style> canvas{ border:1px solid #ccc; margin:50px; } </style> <script src="../js/jquery-1.12.4.min.js"></script> <script> $(function(){ //获取标签 var cas = document.getElementById('canvas'); //获取绘制环境 var ctx = cas.getContext('2d'); ctx.fillStyle ="#eef"; ctx.fillRect(0,0,300,300); ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.shadowColor = "rgba(100,100,100,0.5)"; ctx.shadowBlur = 7; for(var j=0;j<3;j++){ ctx.translate(80,80); create5star(ctx); ctx.fill(); } function create5star(ctx){ var dx =0; var dy=0; var s=50; ctx.beginPath(); ctx.fillStyle ='rgba(255,0,0,0.5)'; var x =Math.sin(0); var y =Math.cos(0); var dig = Math.PI/5*4; for(var i=0;i<5;i++){ x=Math.sin(i*dig); y=Math.cos(i*dig); ctx.lineTo(dx+x*s,dy+y*s) } ctx.closePath(); ctx.fill(); } }) </script> </head> <body> <canvas id="canvas" width="300" height="300">您的浏览器不支持canvas</canvas> </body> </html>

五角星阴影

10、canvas使用图像

语法：ctx.drawImage(imgobj,left,top,width,height)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas基础api</title> <style> canvas{ border:1px solid #ccc; } </style> <script src="../js/jquery-1.12.4.min.js"></script> <script> $(function(){ //获取标签 var cas = document.getElementById('canvas'); //获取绘制环境 var ctx = cas.getContext('2d'); //导入图片 var img = new Image(); img.src="../images/002.png"; //图片加载完之后，再开始绘制图片 img.onload = function(){ //绘制图片ctx.drawImage(imgobj,left,top,width,height) ctx.drawImage(img,100,50,300,200) } }) </script> </head> <body> <canvas id="canvas" width="500" height="300">您的浏览器不支持canvas</canvas> </body> </html>

以上就是HTML5 Canvas来绘制图形的详细内容，更多请关注二当家的素材网其它相关文章！