欲看动态效果请点击下载并用Chrome/Firefox浏览器打开index,html。

图例：

从效果可以明显的看到，五角星边缘和中心都没有对背景遮挡。

代码：

  1. <!DOCTYPE html>
  2. <html lang="utf-8">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <head>
  5.      <title>动态背景3 19.3.4 12:43 by:逆火狂飙 horn19782016@163.com</title>
  6.  
  7.      <style>
  8.      #canvas{
  9.         background:#ffffff;
  10.         cursor:pointer;
  11.         margin-left:10px;
  12.         margin-top:10px;
  13.         -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  14.         -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  15.         box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  16.      }
  17.  
  18.      #controls{
  19.         margin-top:10px;
  20.         margin-left:15px;
  21.      }
  22.      </style>
  23.  
  24.     </head>
  25.  
  26.      <body onload="init()">
  27.         <div id="controls">
  28.             <input id='animateBtn' type='button' value='运动'/>
  29.         </div>
  30.  
  31.         <canvas id="canvas" width="1200px" height="562px" >
  32.             出现文字表示你的浏览器不支持HTML5
  33.         </canvas>
  34.      </body>
  35. </html>
  36. <script type="text/javascript">
  37. <!--
  38. var paused=true;
  39. animateBtn.onclick=function(e){
  40.     paused=! paused;
  41.  
  42.     if(paused){
  43.         animateBtn.value="运动";
  44.     }else{
  45.         animateBtn.value="暂停";
  46.         window.requestAnimationFrame(animate);
  47.     }
  48. }
  49.  
  50. var ctx;// 绘图环境
  51. var bg;// 背景
  52. var icon1;
  53. var icon2;
  54.  
  55. var bgOffset;
  56. var bgVelocity;
  57.  
  58. function init(){
  59.     // init Canvas
  60.     var canvas=document.getElementById('canvas');
  61.     canvas.width=1200;
  62.     canvas.height=562;
  63.     ctx=canvas.getContext('2d');
  64.  
  65.     // init varialbles
  66.     bg=new Image();
  67.     bg.src="greenBG.jpg";
  68.  
  69.     icon1=new Image();
  70.     icon1.src="fiveStar1.png";
  71.  
  72.     icon2=new Image();
  73.     icon2.src="fiveStar2.png";
  74.  
  75.     bgOffset=0;
  76.     bgVelocity=10;
  77. };
  78.  
  79. function update(){
  80.  
  81. }
  82.  
  83. var index=0;
  84. function draw(){
  85.     ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
  86.     bgOffset+=bgVelocity;
  87.     if(bgOffset>ctx.canvas.width){
  88.         bgOffset=0;
  89.     }
  90.  
  91.     ctx.drawImage(bg,bgOffset,0,ctx.canvas.width-bgOffset,canvas.height,0,0,ctx.canvas.width-bgOffset,canvas.height);
  92.     ctx.drawImage(bg,0,0,bgOffset,canvas.height,ctx.canvas.width-bgOffset,0,bgOffset,canvas.height);
  93.  
  94.     index++;
  95.     if(index>100){
  96.         index=0;
  97.     }
  98.  
  99.     if(index % 2 ==0){
  100.         ctx.drawImage(icon1,20,60);
  101.     }else{
  102.         ctx.drawImage(icon2,20,60);
  103.     }
  104.  
  105. }
  106.  
  107. function animate(){
  108.     if(!paused){
  109.  
  110.         update();
  111.         draw();
  112.  
  113.         setTimeout( function(){
  114.             window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
  115.         }, 0.20 * 1000 );// 延时执行
  116.     }
  117. }
  118. //-->
  119. </script>

2019年3月4日13点47分

[Canvas]用透明PNG图在背景上画前景能不遮挡背景的更多相关文章

  1. 相机拍的图，电脑上画的图，word里的文字，电脑屏幕，手机屏幕，相机屏幕显示大小一切的一切都搞明白了！

    相机拍的图,电脑上画的图,word里的文字,电脑屏幕,手机屏幕,相机屏幕显示大小一切的一切都搞明白了! 先说图片X×dpi=点数dotX是图片实际尺寸,简单点,我们只算图片的高吧,比如说拍了张图片14 ...

  2. 在MPAndroidChart库K线图的基础上画均线

    CombinedChart 可以直接使用MPAndroidChart库里面提供的CombinedChart实现组合图形 Demo:CombinedChartDemo ------分割线(如果想在一个图 ...

  3. canvas上画出坐标集合，并标记新坐标，背景支持放大缩小拖动功能

    写在前面:项目需求,用户上传一个区位的平面图片,用户可以在图片上添加新的相机位置,并且展示之前已绑定的相机坐标位置,图片支持放大缩小&拖动的功能.新增坐标,页面展示相对canvas定位,保存时 ...

  4. CSS实现背景透明而背景上的文字不透明完美解决

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  5. 如何让窗口控件半透明（控件在Paint自己时，首先向主窗口询问，获取主窗口上控件所在区域的背景图）

    在网上关于窗口视觉效果,有2个问题被问得最多:第一个是如何让窗口边框有阴影效果?第二个是如何让窗口控件有半透明效果? 对于第一个问题,我们的答案是用双层窗口模拟或是用Layered Window.在X ...

  6. CSS实现背景透明而背景上的文字不透明

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  7. CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

  8. canvas学习之折线图

    接着上一张柱状图讲,我们是使用折线图: import {canvasPoint} from '../../assets/js/canvas';import {basicInfo,histogramMo ...

  9. 封装构造函数，用canvas写饼状图和柱状图

    封装构造函数,用canvas写饼状图和柱状图 封装函数 // 场景 function XDLScence( options ) { this.stage = options.stage; //执行场景 ...

随机推荐

  1. CAS服务器配置

    参考文献: http://sucre.blog.51cto.com/1084905/683624 1.安装部署CAS Server 从官网下载CAS Server,今天发现CAS Server的官网居 ...

  2. [Go] sync.Pool 的实现原理 和 适用场景

    摘录一: Go 1.3 的 sync 包中加入一个新特性:Pool. 官方文档可以看这里 http://golang.org/pkg/sync/#Pool 这个类设计的目的是用来保存和复用临时对象,以 ...

  3. AI 实验--v_JULY_v

    http://blog.csdn.net/v_JULY_v http://www.julyedu.com/

  4. JSP页面中使用JSTL标签出现无法解析问题解决办法

    今天建立一个JavaWeb工程测试JNDI数据源连接,在jsp页面中引入了JSLT标签库,代码如下: <%@ page language="java" import=&quo ...

  5. 在ASP.NET Web API中实现CORS(跨域资源共享)

    默认情况下,是不允许网页从不同的域访问服务器资源的,访问遵循"同源"策略的原则. 会遇到如下的报错: XMLHttpRequest cannot load http://local ...

  6. 在CentOS4上安装JMagick

    用Java做网站经常要处理用户上传的图片,例如生成缩略图等等.虽然Java可以使用Java2D进行一些图片操作,但是功能和效率实在太差了. 目前比较好的是用JMagick来进行图像处理,不过JMagi ...

  7. NoSQL现状

    经过了至少4年的激烈争论,现在是对NoSQL的现状做一个阶段性结论的时候了.围绕着NoSQL发生了如此之多的事情,以至于很难对其作出一个简单概括,也很难判断它达到了什么目标以及在什么方面没有达到预期. ...

  8. Swift - 添加纯净的Alamofire

    Swift - 添加纯净的Alamofire 如果你有代码洁癖,不能容忍任何多余的东西,请继续往下看.  . 下载Alamofire (https://github.com/Alamofire/Ala ...

  9. 寂静之地百度云在线观看迅雷下载A Quiet Place高清BT下载

      原名:A Quiet Place 地区:美国 语言:英语 / 美国手语 首播:2018-05-18(中国大陆) / 2018-03-09(西南偏南电影节) / 2018-04-06(美国) 电视台 ...

  10. 实用ExtJS教程100例-007：ExtJS中Window组件最小化

    在上一节中我们演示了如何使用ExtJS的Window组件,这篇内容中我们来演示一下如何将窗口最小化. 要让ExtJS标题栏中显示最小化按钮并不麻烦,只需要设置 minimizable: true 即可 ...