《HTML5游戏编程核心技术与实战》——2.6 其他全局属性-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

《HTML5游戏编程核心技术与实战》——2.6 其他全局属性

简介:

本节书摘来自异步社区《HTML5游戏编程核心技术与实战》一书中的第2章,第2.6节,作者: 向峰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.6 其他全局属性

在context中还有一些常见的全局属性,做一些了解。

  • globalAlpha:透明度,这个值用来设置在画布上绘制的透明度,值的范围从0~1之间,使用这个属性我们可以完成一些常见的效果,比如游戏中常见的淡入淡出效果。
    以下代码展示了一张图片淡入,也就是逐渐显示的效果。
<body>
  <h2>淡入</h2>
  <img src="img/t1.jpg" id="img1" style="display:none" /><br>
  <canvas id="can" width="300" height="200"></canvas>
</body>
<script>
  function $(id)
  {
   return document.getElementById(id);
  } 
  function draw()
  {
   //清除屏幕   
   ctx.drawImage($("img1"), 0, 0);   
  } 
  document.body.onload = function()
  {
   //获取canvas的上下文
   ctx = $("can").getContext("2d");
   //获取图片的宽高度
   $("can").width = $("img1").width,
   $("can").height = $("img1").height;
   ctx.globalAlpha = 0;
   var tHandle = window.setInterval(function(){
     ctx.globalAlpha+=0.05;
     draw();
     if(ctx.globalAlpha>=0.95)
     {
      window.clearInterval(tHandle);
     }
   }, 100);
  }  
</script>
  • globalCompositeOperation:全局混合模式,这个属性定义了如果在画布上绘制多个图像时,图像进行叠加的方式,也称为混合模式,类似于Photoshop这种图像处理软件中图层的叠加模式。表2-4列出了混合模式的可能值,表2-4中,正方形表示目标图像,圆形表示源图像。


7dc5e2ad0ef4a51e301153b320df53f5ba4a239c


00febe31ff74883e4103728f04e690bf4bb44c79


<a href=https://yqfile.alicdn.com/6299a233dea7c5ee33210c023882c3716ce6229e.png" >


b495cb5bcf16b47b58e381aaf816f5b3821b5309

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章