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

图例：

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

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>动态背景3 19.3.4 12:43 by:逆火狂飙 horn19782016@163.com</title>

     <style>
     #canvas{
        background:#ffffff;
        cursor:pointer;
        margin-left:10px;
        margin-top:10px;
        -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        box-shadow:3px 3px 6px rgba(0,0,0,0.5);
     }

     #controls{
        margin-top:10px;
        margin-left:15px;
     }
     </style>

    </head>

     <body onload="init()">
        <div id="controls">
            <input id='animateBtn' type='button' value='运动'/>
        </div>

        <canvas id="canvas" width="1200px" height="562px" >
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
var paused=true;
animateBtn.onclick=function(e){
    paused=! paused;

    if(paused){
        animateBtn.value="运动";
    }else{
        animateBtn.value="暂停";
        window.requestAnimationFrame(animate);
    }
}

var ctx;// 绘图环境
var bg;// 背景
var icon1;
var icon2;

var bgOffset;
var bgVelocity;

function init(){
    // init Canvas
    var canvas=document.getElementById('canvas');
    canvas.width=1200;
    canvas.height=562;
    ctx=canvas.getContext('2d');

    // init varialbles
    bg=new Image();
    bg.src="greenBG.jpg";

    icon1=new Image();
    icon1.src="fiveStar1.png";

    icon2=new Image();
    icon2.src="fiveStar2.png";

    bgOffset=0;
    bgVelocity=10;
};

function update(){

}

var index=0;
function draw(){
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
    bgOffset+=bgVelocity;
    if(bgOffset>ctx.canvas.width){
        bgOffset=0;
    }

    ctx.drawImage(bg,bgOffset,0,ctx.canvas.width-bgOffset,canvas.height,0,0,ctx.canvas.width-bgOffset,canvas.height);
    ctx.drawImage(bg,0,0,bgOffset,canvas.height,ctx.canvas.width-bgOffset,0,bgOffset,canvas.height);

    index++;
    if(index>100){
        index=0;
    }

    if(index % 2 ==0){
        ctx.drawImage(icon1,20,60);
    }else{
        ctx.drawImage(icon2,20,60);
    }

}

function animate(){
    if(!paused){

        update();
        draw();

        setTimeout( function(){
            window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
        }, 0.20 * 1000 );// 延时执行
    }
}
//-->
</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. 详细分析Memcached缓存与Mongodb数据库的优点与作用

    http://www.mini188.com/showtopic-1604.aspx 本文详细讲下Memcached和Mongodb一些看法,以及结合应用有什么好处,希望看到大家的意见和补充. Mem ...

  2. Revit MEP API连接器类别

    连接器的类别,风管不仅有两端,可能在曲线上也有. ;         ;         ;         ;             Connector conn = csi.Current ; ...

  3. 使用Axure RP原型设计实践04,了解全局变量

    变量是一个可以变的数,可以看作是一个数据的容器.变量有2个操作,一个是读,一个是写.Axure的全局变量是指任何时候都可以对这个变量进行读写操作. 点击工具栏Project下的Global Varia ...

  4. Delphi XE中String、ANSIString、TBytes之间的转换

    一.string转为ansistring1.直接赋值 (有警告)2.ansistring()类型强制转换.(无警告) 二.ansistring 转为string 1.直接赋值 (有警告)2.strin ...

  5. C# 连接Oracle数据库，免安装oracle客户端

    一.方案1 首先下面的内容,有待我的进一步测试和证实.18.12.20 被证实了,还需要安装Oracle客户端,或者本机上安装oracle数据库软件. 18.12.20 1.下载Oracle.Mana ...

  6. Git：常用命令（一）

    取得项目的Git 仓库 从当前目录初始化 git init 初始化后,在当前目录下会出现一个名为.git 的目录,所有Git 需要的数据和资源都存放在这个目录中.不过目前,仅仅是按照既有的结构框架初始 ...

  7. .NET：默认是按值传递的

    小测试 代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  8. Java文件管理系统

    上一个版本设计参照了 windows 资源管理器的原则,使用了多年.也发现了少许问题,也许是我们应用场景不一样... 目前的设计结合了目前的云概念.目录采用的是虚拟方式和实际的目录无关,只是存在一定的 ...

  9. 3分钟搞定SpringBoot+Mybatis+druid多数据源和分布式事务

    文章来自: https://blog.csdn.net/qq_29242877/article/details/79033287 在一些复杂的应用开发中,一个应用可能会涉及到连接多个数据源,所谓多数据 ...

  10. 深入理解Java Callable接口

    概述Callable和Runnbale一样代表着任务,区别在于Callable有返回值并且可以抛出异常.其使用如下: public class CallableDemo { static class ...