为什么在javascript动态添加gif图片不播放呢

chaojikugua 2014-07-30 08:37:48

<!DOCTYPE HTML>

<html>

<head>

    <title>ggg</title>

</head>

<canvas id="ground" width="640" height="560"   onmousedown="mouseDown()">

</canvas>



<body onLoad="load()">



<script type="text/javascript">

    var beauty;

    var mycv = document.getElementById("ground");

    mycv.addEventListener("onmousedown",mouseDown,false);

    var myctx = mycv.getContext("2d");

    function drawBeauty(beauty,x,y){



        myctx.drawImage(beauty, x,y);

    }

    function mouseDown(e){

        e=e||window.event;

       

	drawBeauty(beauty, e.clientX, e.clientY);}

    function load(){

        beauty = new Image();

        beauty.src = "bd.gif";

        myctx.drawImage(beauty);



}

    //load

    </script>



</body>



</html>

...全文

260 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

chaojikugua 2014-07-30

打赏
举报

引用 1 楼 xiucainh 的回复:

FireFox 等支持W3C标准的浏览器事件名称前面没有on
mycv.addEventListener("mousedown",mouseDown,false);
IE 用attachEvent方法这时事件名前面加on
mycv.attachEvent("onmousedown",mouseDown);

但是屏幕会显示图片啊。只是图片是静止的，canvas的drawimg只能会出一帧的图，怎么让它动起来？

xiucainh 2014-07-30

打赏
举报

FireFox 等支持W3C标准的浏览器事件名称前面没有on

mycv.addEventListener("mousedown",mouseDown,false);

IE 用attachEvent方法这时事件名前面加on

mycv.attachEvent("onmousedown",mouseDown);

正常gif图片在浏览器中不加任何控制的话，会在页面加载完成后，自动播放，不受控制。二、解放方案 1、将每个gif图片的第一帧图像保存起来，作为浏览器加载完成后的显示图片，事先让UI设计师设计每个gif图片时...

<!... <title>Document ... myImage.src = 'https://thecatapi.com/api/images/get?format=src&type=gif'; myParent.appendChild(myImage); myImage.style.marginLeft = "160px"; }); }

刚开始准备通过gifshot插件实现的，先将GIF按帧拆分成一张张图片，再设置每张图片之间的帧间隔，最后再拼接成一个新的GIF图片。但是用这个方法实现的话，在页面中通过滑块改变帧间隔的时候，需要重新绘制渲染GIF，...

Cesium官方给了将视频投影到几何体的Demo，不得不说第一眼看到还是比较惊艳的，那么Cesium能不能将gif图片也投影到几何体呢，答案是不能像视频一样直接投影，但是如果我们借助一些其它工具，还是能实现这个功能的。...

网上查找资料发现，openlayers不支持gif图片样式。后面采用overlay的方式，gif图片赋值给DOM元素先添加一个标签，用v-for遍历数据以动态生成数个div // An highlighted block <div v-for="(n, index) in ...

JavaScript

87,909

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章