圆月山庄资源网

HTML5 canvas基本绘图之图形组合
网页制作 2024/12/23 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在<canvas元素上绘图主要有三步：

1.获取<canvas>元素对应的DOM对象，这是一个Canvas对象；
2.调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；
3.调用CanvasRenderingContext2D对象进行绘图。

图形组合：

•globalAlpha： 设置或返回绘图的当前 alpha 或透明值

该方法主要是设置图形的透明度，这里就不具体介绍。

•globalCompositeOperation： 设置或返回新图像如何绘制到已有的图像上，该方法有以下属性值：

HTML5 canvas基本绘图之图形组合

下面是一个小示例，可以通过点击改变组合效果：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>图形组合</title>  
  6.     <style type="text/css">  
  7.         #canvas{   
  8.             border: 1px solid #1C0EFA;   
  9.             display: block;   
  10.             margin: 20px auto;   
  11.         }   
  12.         #buttons{   
  13.             width: 1000px;   
  14.             margin: 5px auto;   
  15.             clear:both;   
  16.         }   
  17.         #buttons a{   
  18.             font-size: 18px;   
  19.             display: block;   
  20.             float: left;   
  21.             margin-left: 20px;   
  22.         }   
  23.     </style>  
  24. </head>  
  25. <body>  
  26.     <canvas id="canvas" width="1000" height="800">  
  27.             你的浏览器还不支持canvas   
  28.     </canvas>  
  29.     <div id="buttons">  
  30.         <a href="#">source-over</a>  
  31.         <a href="#">source-atop</a>  
  32.         <a href="#">source-in</a>  
  33.         <a href="#">source-out</a>  
  34.         <a href="#">destination-over</a>  
  35.         <a href="#">destination-atop</a>  
  36.         <a href="#">destination-in</a>  
  37.         <a href="#">destination-out</a>  
  38.         <a href="#">lighter</a>  
  39.         <a href="#">copy</a>  
  40.         <a href="#">xor</a>  
  41.     </div>  
  42. </body>  
  43. <script type="text/javascript">  
  44.   
  45. window.onload = function(){   
  46.     draw("source-over");   
  47.   
  48.     var buttons = document.getElementById("buttons").getElementsByTagName("a");   
  49.     for (var i = 0; i < buttons.length; i++) {   
  50.         buttons[i].onclick = function(){   
  51.             draw(this.text);   
  52.             return false;   
  53.         };   
  54.     }   
  55. };   
  56.   
  57.     function draw(compositeStyle){   
  58.         var canvas = document.getElementById("canvas");   
  59.         var context = canvas.getContext("2d");   
  60.   
  61.         context.clearRect(0, 0, canvas.width, canvas.height);   
  62.   
  63.         //draw title   
  64.         context.font = "bold 40px Arial";   
  65.         context.textAlign = "center";   
  66.         context.textBasedline = "middle";   
  67.         context.fillStyle = "#150E0E";   
  68.         context.fillText("globalCompositeOperation = "+compositeStyle, canvas.width/2, 60);   
  69.   
  70.         //draw a rect   
  71.         context.fillStyle = "#F6082A";   
  72.         context.fillRect(300, 150, 500, 500);   
  73.   
  74.         //draw a triangle   
  75.         context.globalCompositeOperation = compositeStyle;   
  76.         context.fillStyle = "#1611F5";   
  77.         context.beginPath();   
  78.         context.moveTo(700, 250);   
  79.         context.lineTo(1000,750);   
  80.         context.lineTo(400, 750);   
  81.         context.closePath();   
  82.         context.fill();   
  83.     }   
  84.   
  85. </script>  
  86. </html>  

读者可以点击标签来观察不同的组合效果，效果如下：

HTML5 canvas基本绘图之图形组合

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
HTML5,canvas,图形组合
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接