HTML5 利用canvas API 展示阴影效果

简介:

HTML5的Canvas自带API可以显示阴影效果,主要还是在画布(canvas)的上下文对象(context)上做文章

 
 
  1. <!DOCTYPE html> 
  2. <head> 
  3. <meta charset="UTF-8"> 
  4. <title>HTML5 Combine Shape DEMO</title> 
  5. <script type="text/javascript" src="js/drawShadow.js"></script> 
  6. </head> 
  7.  
  8. <body onload="draw('canvas')"></body> 
  9. <h2>canvas:显示阴影效果</h2> 
  10.  
  11.  
  12. <!-- 指定一个canvas元素用于显示结果 --> 
  13. <canvas id="canvas" width="400” height="400"/> 
  14. <br><br> 

画带阴影效果的图形见如下的js代码:

 
 
  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.  function draw (id){ 
  8.      
  9.     //取得画布对象 
  10.     var canvas = document.getElementById(id); 
  11.     if(canvas ==null
  12.     return false
  13.     //取得上下文 
  14.     var context = canvas.getContext('2d'); 
  15.     //绘制底图 
  16.     context.fillStyle='#FFEEFF'
  17.     context.fillRect(0,0,400,400); 
  18.      
  19.     //以下4个属性是阴影的设置属性,用他们可以用来画阴影效果 
  20.      
  21.     //shadowOffSetX是横向位移量,所以这里设置为10表明阴影会出现在原图形右边,最多10像素 
  22.     context.shadowOffSetX=10; 
  23.     //shadowOffSetX是纵向位移量,所以这里设置为10表明阴影会出现在原图形下边,最多10像素 
  24.     context.shadowOffsetY=10; 
  25.     //阴影的颜色 
  26.     context.shadowColor="rgba(50,50,100,0.5)"
  27.     //阴影的模糊范围 
  28.     context.shadowBlur=7.5; 
  29.      
  30.     //所以到这里为止,我们吧上下文关联上了阴影效果,所有用这个context绘制的图形都会有(+10,+10)的阴影效果 
  31.      
  32.     //绘制五角星 
  33.     context.translate(50,50); 
  34.     create5star(context); 
  35.     context.fill(); 
  36.  } 
  37.   
  38.  function create5star(context){ 
  39.      
  40.      var n = 0; 
  41.      var dx=100; 
  42.      var dy=0; 
  43.      var s = 50; 
  44.      //创建路径 
  45.      context.beginPath(); 
  46.      context.fillStyle='rgba(255,0,0,0.5)'
  47.      var x = Math.sin(0); 
  48.      var y=Math.cos(0); 
  49.      var dig = Math.PI/5*4; 
  50.      //画5条边 
  51.      for(var i =0;i<5;i++){ 
  52.         var x = Math.sin(i * dig); 
  53.         var y = Math.cos(i* dig); 
  54.         context.lineTo(dx+x*s,dy+y*s); 
  55.      } 
  56.      context.closePath(); 
  57.  } 

 

最终展示效果如图:





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

目录
相关文章
|
3月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
70 0
|
15天前
|
XML 移动开发 前端开发
HTML5 SVG和canvas的性能探讨
HTML5 中的 SVG(可缩放矢量图形)和 Canvas(画布)分别用于网页图形绘制。SVG 基于矢量图形,使用 XML 描述,适合静态或少量动态内容(如图标、图表),易于编辑且保持高分辨率;Canvas 则基于位图,通过 JavaScript 绘制,更适合快速更新大量图形的场景(如游戏、动态动画),但在复杂图形计算时可能遇到性能瓶颈。总体而言,SVG 适用于静态和少量动态内容,而 Canvas 更适合高频率更新和性能要求高的场景。
|
15天前
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `&lt;canvas&gt;` 元素,并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本,以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。
|
12天前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
2月前
|
Dart 前端开发 Java
|
27天前
|
前端开发
在 HTML canvas 绘制文本
在 HTML canvas 绘制文本
12 0
|
2月前
|
移动开发 API 开发者
什么是HTML5 History API有哪些应用场景
【8月更文挑战第11天】什么是HTML5 History API有哪些应用场景
42 1
|
2月前
|
移动开发 API 开发者
什么是HTML5 History API
【8月更文挑战第11天】什么是HTML5 History API
29 1
|
2月前
|
移动开发 前端开发 API
React路由和HTML5 History API有什么区别
【8月更文挑战第11天】React路由和HTML5 History API有什么区别
33 1
|
2月前
|
移动开发 前端开发 JavaScript