欲看动态效果请点击下载并用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. TIDB VS COCKROACHEB

    分布式事务 要支持分布式事务,首先要解决的就是分布式系统时间的问题,也就是我们用什么来标识不同事务的顺序.通常有几种做法: TrueTime,TrueTime 是 Google Spanner 使用的 ...

  2. How AOT compares to a traditional JIT compiler

    Ahead-of-Time (AOT) compilation is in contrast to Just-in-Time compilation (JIT). In a nutshell, .NE ...

  3. 集群服务器下使用SpringBoot @Scheduled注解定时任务

    原文:https://blog.csdn.net/huyang1990/article/details/78551578 SpringBoot提供了 Schedule模块完美支持定时任务的执行 在实际 ...

  4. Odoo9发行说明

    2015年10月1日,期待已久的Odoo9正式发布.本文是Odoo9正式版发行说明,基于官网资料翻译. 译者: 苏州-微尘原文地址:https://www.odoo.com/page/odoo-9-r ...

  5. 如何让xcode自动检查内存泄露

    在project-setting中找到 “Run Static Analyzer” 键,然后把值修改为“YES”.这样在编码的时候,xcode就可以自动为我们检查内存泄露了. 原图片:http://b ...

  6. JS 日期实用方法

    var DateUtil = function(){ /** * 判断闰年 * @param date Date日期对象 * @return boolean true 或false */ this.i ...

  7. 【linux】linux下shell命令 多个变量在命令中的引用 以及重新赋值给新的变量

    原本的find命令: find /apps/Devops/jenkins/workspace/swapping/target/ -name '*swapping*.jar' 错误的命令: SOURCE ...

  8. dev的documentManager，多个tab窗体

    private void AddDocument(Funcation CurrentModel) { if (!string.IsNullOrWhiteSpace(CurrentModel.Funct ...

  9. SharePoint 2013 workflows stop working (Failed on started.)

    前言 最近,使用工作流的时候碰到了一个问题,突然间所有工作流都无法启动,报错Failed on started. 同时,工作流内部报错,工作流被系统账号取消了. 查了很久,发现系统打了windows ...

  10. 怎样把vector和string数据传给旧的C API

     通常情况下.旧的C API使用数组合char*指针来进行数据交换而不是vector或string对象. 这种API还将存在非常长的一段时间,假设我们想有效地使用STL.我们就必须与它们和平共处. ...