欲看动态效果请点击下载并用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. SystemParametersinfo用法（二）

    SystemParametersinfo用法(二) SPI_SETDOUBLECLKHEGHT:将ulParam参数的值设为双击矩形区域的高度.双击矩形区域是指双击中的第2次点击时鼠标指针必须落在的区 ...

  2. 自己动手实现一个MVVM库

    我们知道的,常见的数据绑定的实现方法 1.数据劫持(vue):通过Object.defineProperty() 去劫持数据每个属性对应的getter和setter2.脏值检测(angular):通过 ...

  3. JavaScript中0和""的比较问题

    今天在公司的时候发现了一个很奇怪的Js的问题,以前也没有注意到,我从数据库中取出某一个字段的值,而这个字段值刚好是0,然后我在判断这个值是不是等于""时,就出现了如下的问题: 就是 ...

  4. Win10年度更新开发必备：VS2015 Update 2正式版下载汇总

    ========================================================================== 微软在03月30日发布了Visual Studio ...

  5. 在qemu模拟的aarch32上使用kgtp

    KGTP 介绍 KGTP 是一个能在产品系统上实时分析 Linux 内核和应用程序(包括 Android)问题的全面动态跟踪器. 使用 KGTP 不需要 在 Linux 内核上打 PATCH 或者重新 ...

  6. java数组和字符串相互转换

    将字符串变成数组 Java.lang包中有String.split()方法,java中通常用split()分割字符串,返回的是一个数组. 特殊,转义字符,必须加"\\"(“.”和“ ...

  7. mongodb 脚本操作

    MO='mongo'$MO << EOFuse testdbdb.dropDatabase()show dbsexit;EOF

  8. 用开源项目cropper实现对图片中任意部分进行裁剪

     红色区域为截图控件的区域.    开源项目地址:https://github.com/edmodo/cropper croper这个开源项目可以对一个图片进行任意区域的街区,并且可以设置图片的旋转角 ...

  9. Shape画圆形控件

    这里涉及到shape的运用,这仅仅是一个实例 circle.xml <?xml version="1.0" encoding="utf-8"?> & ...

  10. 服务器配置多版本CUDA、CUdnn(不同Linux账户使用不同CUDA、CUdnn版本）

    一.由于实验室大家使用的CUDA.CUdnn不同,所以需要在同一台服务器安装多个版本,而且要不引起冲突,方法如下: 1.一般来说CUDA安装在 /usr/local 目录下(当然你可以通过“echo ...