大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

HTML5利用CanvasAPI组合图形

 在HTML5中有11种组合图形的方式,只要把他们设置到context.globalCompositeOperation中就可以了,我这里做了一个小例子来证明各种图形组合方式的结果

在鱼台等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站建设、做网站 网站设计制作按需定制,公司网站建设,企业网站建设,品牌网站制作,全网整合营销推广,成都外贸网站建设公司,鱼台网站建设费用合理。

HTML代码很简单,就2个控件,一个是下拉列表,让用户选择组合方式,并且一旦用户做出了选择,就执行js函数draw(id),从而在第二个控件canvas上根据用户当前选择的组合方式进行画图。第二个控件就是一个canvas,用于显示画图的内容。

  1.  
  2.  
  3.  
  4. HTML5 Combine Shape DEMO 
  5.  
  6.  
  7.  
  8.  
  9. canvas:显示组合图形

     
  10.  
  11.  
  12.  
  13.  
  14. source-atop 
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  


  26.  
  27.  
  28.  
  29.  


  30.  

js函数就是负责响应下拉列表的onchange事件从而在canvas上画图,它先绘制原图形(distination,在这里是一个蓝色正方形),然后取得用户选择的组合方式,再根据此方式画出新图形(source,在这里是一个红色的圆):

  1. /** 
  2.  *  This file is confidential by Charles.Wang 
  3.  *  Copyright belongs to Charles.wang 
  4.  *  You can make contact with Charles.Wang (charles_wang888@126.com) 
  5.  */ 
  6.   
  7.   
  8.  function draw(id){ 
  9.      
  10.     //得到用户选择的图形组合选项: 
  11.     var selectComponent=document.getElementById("selectCombineMethod"); 
  12.     //取得用户的选择的索引 
  13.     var selectedIndex =selectComponent.selectedIndex; 
  14.     //得到用户的选择的值,也就是选择的图形组合策略 
  15.     var selectedCombinedStrategy = selectComponent.options[selectedIndex].value; 
  16.      
  17.     //得到页面上的画布对象 
  18.     var canvas=document.getElementById(id); 
  19.     if(canvas ==null) 
  20.     return false; 
  21.      
  22.     var context = canvas.getContext('2d'); 
  23.     //画原来的图形,蓝色正方形 
  24.     context.fillStyle="blue"; 
  25.     context.fillRect(40,40,60,60); 
  26.      
  27.     //将用户选择的图形组合方式设定到context中 
  28.     context.globalCompositeOperation=selectedCombinedStrategy; 
  29.      
  30.     //画新图形,是一个红色的圆 
  31.     //这时候,context会根据图形的组合策略来决定如何绘制这2个图形 
  32.     context.beginPath(); 
  33.     context.fillStyle="red"; 
  34.     context.arc(40+60,40+60,30,0,Math.PI*2,false); 
  35.     context.fill(); 
  36.      
  37.    
  38.      
  39.      
  40.  } 

 

实验可以根据你用户的选择来显示不同结果:

这里的source是红色的圆(新图形),distination是蓝色正方形(旧图形)

 

  • source-atop=新图形中(新 and 老)+老图形中(!(新 and 老))

HTML5 利用Canvas API 组合图形

 

  • source-in=新图形中(新 and 老)

HTML5 利用Canvas API 组合图形

 

  • source-out=新图形中(!(新 and 老))

HTML5 利用Canvas API 组合图形

 

  • source-over(默认值)=老图形中(!(新 and 老))+新图形中(全部)

HTML5 利用Canvas API 组合图形

 

  • destination-atop=老图形中(新 and 老)+新图形中(!(新 and 老))

HTML5 利用Canvas API 组合图形

 

  • destination-in=老图形中(新 and 老)

HTML5 利用Canvas API 组合图形

 

  • destination-out=老图形中(!(新 and 老))

HTML5 利用Canvas API 组合图形

 

  • destination-over=老图形中(全部)+新图形中(!(新 and 老))

HTML5 利用Canvas API 组合图形

 

  • lighter=老图形中(!(新 and 老))+ 新图形中(!(新 and 老))+新 and 老(色彩叠加) 

HTML5 利用Canvas API 组合图形

 

  • copy=新图形中(全部)

HTML5 利用Canvas API 组合图形

 

  • xor(对称差)=老图形中(!(新 and 老))+新图形中(!(新 and 老))

HTML5 利用Canvas API 组合图形


本文题目:HTML5利用CanvasAPI组合图形
文章起源:http://dzwzjz.com/article/poshoe.html
在线咨询
服务热线
服务热线:028-86922220
TOP