H5学习之9 canvas的运用4 图片的绘制

最新推荐文章于 2024-05-15 12:14:01 发布

GOGOGOAAAA

最新推荐文章于 2024-05-15 12:14:01 发布

阅读量1k

点赞数

分类专栏： h5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/qq_29469941/article/details/52027295

版权

h5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<canvas id="myCanvas" width="300" height="200" style="border:1px solid black">
<!--属性赋值时一般都是 xx="yyy" 而属性里具有别的属性还要赋值时， 格式是 xx:y (可能有特殊情况，因为我学习的还不是很多)-->
</canvas>

<script type="text/javascript">
   var c=document.getElementById("myCanvas");
    var cxt= c.getContext("2d");
  /* var img=new Image();
    img.src="ct_html5_canvas_image.gif";
    cxt.drawImage(img,0,0);
    直接用这种形式是不出图片的，因为图片的加载是异步的。会先执行了绘制函数，
    但是此时图片还没有加载进来，所以是空白的，需要用下边的方式，实现图片的预加载。
    */
   preImage("ct_html5_canvas_image.gif",function(){
       cxt.drawImage(this,0,0);
   });


   function preImage(url,callback){
       var img = new Image(); //创建一个Image对象，实现图片的预下载
       img.src = url;

       if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
           callback.call(img);
           return; // 直接返回，不用再处理onload事件
       }

       img.onload = function () { //图片下载完毕时异步调用callback函数。
           callback.call(img);//将回调函数的this替换为Image对象
       };
   }


</script>
</body>
</html>

具体效果如下：

思路解释如下：

如前一样，在body里创建一个canvas标签当作画板。

<canvas id="myCanvas" width="300" height="200" style="border:1px solid black">
<!--属性赋值时一般都是 xx="yyy" 而属性里具有别的属性还要赋值时， 格式是 xx:y (可能有特殊情况，因为我学习的还不是很多)-->
</canvas>

然后就是图像的绘制。写在script标签里，sc标签写在body标签里。

<script type="text/javascript">
   var c=document.getElementById("myCanvas");
    var cxt= c.getContext("2d");
  /* var img=new Image();
    img.src="ct_html5_canvas_image.gif";
    cxt.drawImage(img,0,0);
    直接用这种形式是不出图片的，因为图片的加载是异步的。会先执行了绘制函数，
    但是此时图片还没有加载进来，所以是空白的，需要用下边的方式，实现图片的预加载。
    */
   preImage("ct_html5_canvas_image.gif",function(){
       cxt.drawImage(this,0,0);
   });


   function preImage(url,callback){
       var img = new Image(); //创建一个Image对象，实现图片的预下载
       img.src = url;

       if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
           callback.call(img);
           return; // 直接返回，不用再处理onload事件
       }

       img.onload = function () { //图片下载完毕时异步调用callback函数。
           callback.call(img);//将回调函数的this替换为Image对象
       };
   }
</script>

在写这一部分的时候，按正常的教程来写，图片是加载不出来的。

神奇的是在地址栏 按回车重新进入网页之后图片就能加载了。

查阅了网上的说法之后才解决。也就是注释里写到的，因为在绘制图片的时候图片还没有加载进来，因为图片的加载是异步的，所以会造成绘制空白。而通过上边的方式就能够解决这一问题，让图片得到加载之后再进行绘制。

GOGOGOAAAA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录