HTML5 利用Canvas API 组合图形

简介:

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

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

 
 
  1. <!DOCTYPE html> 
  2. <head> 
  3. <meta charset="UTF-8"> 
  4. <title>HTML5 Combine Shape DEMO</title> 
  5. <script type="text/javascript" src="js/drawCombinedShape.js"></script> 
  6. </head> 
  7.  
  8. <body></body> 
  9. <h2>canvas:显示组合图形</h2> 
  10.  
  11. <!-- 创建一个下拉列表来让用户选择按照什么方式来组合图形 --> 
  12. <!-- 一旦用户做出了选择,就会触发onchange处理函数,于是调用js函数,让其在canvas组件上画图 --> 
  13. <select id="selectCombineMethod" onchange="draw('canvas')"> 
  14. <option >source-atop</option> 
  15. <option>source-in</option> 
  16. <option>source-out</option> 
  17. <option>source-over</option> 
  18. <option>destination-atop</option> 
  19. <option>destination-in</option> 
  20. <option>destination-out</option> 
  21. <option>destination-over</option> 
  22. <option>lighter</option> 
  23. <option>copy</option> 
  24. <option>xor</option> 
  25. </select> 
  26. <br><br> 
  27.  
  28. <!-- 指定一个canvas元素用于显示结果 --> 
  29. <canvas id="canvas" width="1000” height="1000"/> 
  30. <br><br> 

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 老))

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

  • copy=新图形中(全部)

 

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





本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/854073,如需转载请自行联系原作者

目录
相关文章
|
11天前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
19 4
|
11天前
|
移动开发 前端开发 HTML5
HTML5 Canvas发光Loading源码
一款基于HTML5 Canvas的发光Loading加载HTML源码。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果
17 1
HTML5 Canvas发光Loading源码
|
11天前
|
移动开发 前端开发 HTML5
Canvas实现超酷Loading动画HTML代码
之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。
15 1
Canvas实现超酷Loading动画HTML代码
|
11天前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
|
11天前
|
缓存 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义绘制与Canvas API
【4月更文挑战第30天】Flutter允许开发者通过`CustomPaint`和`CustomPainter`进行自定义绘制,以实现丰富视觉效果。`CustomPaint` widget将`CustomPainter`应用到画布,而`CustomPainter`需实现`paint`和`shouldRepaint`方法。`paint`用于绘制图形,如示例中创建的`MyCirclePainter`绘制蓝色圆圈。Canvas API提供绘制形状、路径、文本和图片等功能。注意性能优化,避免不必要的重绘和利用缓存提升效率。自定义绘制让Flutter UI更具灵活性和个性化,但也需要图形学知识和性能意识。
【Flutter前端技术开发专栏】Flutter中的自定义绘制与Canvas API
|
移动开发 前端开发 API
《HTML5游戏编程核心技术与实战》一2.2 图形API
创建canvas和获取了canvas的环境上下文之后,就可以开始进行绘图了。绘图的方式有两类:一类是进行图形操作,另一类是图像操作。本小节主要涉及图形相关的API,要使用canvas的API进行绘图,通常需要进行下列步骤。
1666 0
尚硅谷html5+css3(4)浮动
尚硅谷html5+css3(4)浮动
|
1天前
|
前端开发
尚硅谷html5+css3(3)布局
尚硅谷html5+css3(3)布局
|
2天前
|
缓存 前端开发 JavaScript
尚硅谷html5+css3(2)CSS5基本知识
尚硅谷html5+css3(2)CSS5基本知识