欲看动态效果请点击下载并用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. SWD and JTAG selection mechanism

    SWD and JTAG selection mechanism SWJ-DP enables either an SWD or JTAG protocol to be used on the deb ...

  2. embOS实时操作系统 - 任务状态

    A task may be in one of several states at any given time. When a task is created, it is placed into ...

  3. eclipse使用内置tomcat和使用外部tomcat的设置

    近期由于项目中jsp发请求要訪问项目以外的文件.直接訪问写成"c:\xxx\xxx.mp4"来訪问是没有权限的.不能完毕现有要求.经查询后发现能够在tomcat中配置虚拟文件夹将本 ...

  4. struct对象可能分配在托管堆上吗

    struct对象可能被分配在托管堆上吗? --会的. 比如当对struct装箱的时候,就会被分配在托管堆上. 比如,让一个struct实现一个接口. public interface IReport ...

  5. 在ASP.NET MVC下扩展一个带验证的RadioButtonList

    在ASP.NET MVC4中,HtmlHelper为我们提供了Html.RadioButton()方法用来显示Radio Button单选按钮.如果想显示一组单选按钮,通常的做法是遍历一个集合把每个单 ...

  6. JAVA BigDecimal的相加

    之前很少使用这样的一个对象BigDecimal,今天在改需求的时候遇到了,结果坑爹的怎么相加最后都为零. 代码如下: BigDecimal totalAmount = new BigDecimal(0 ...

  7. 【Centos】centos查看磁盘使用情况

    1.查看分区和磁盘 lsblk 查看分区和磁盘 2.查看空间使用情况 df -h 查看空间使用情况 3.分区工具查看分区信息 fdisk -l 分区工具查看分区信息 4.查看分区 cfdisk /de ...

  8. Javascript与Objective-C 字符串与数组的方法类比

    table {border-collapse:collapse;} table td {border:1px solid #ccc;} String vs NSString JavaScript st ...

  9. 在SqlServer 中解析JSON数据 [parseJSON] 函数 数据库中 解析JSON

    使用如下: SELECT * FROM parseJSON('{ "联系人": { "姓名": "huang", "网名" ...

  10. Android ActionBar使用介绍

    一.什么是ActionBar 有图有真相,看一下图片就了解的差不多了 对于大多数应用,操作栏可以分割为 4 个不同的功能区域. 1. 应用图标 应用图标是您应用的标志.在应用图标位置摆放您自己的 lo ...