用纯射流研究…画一棵树。思路：

1、一棵树的图片，作为页面背景；

2、通过html5中的帆布画布进行遮罩；

3、定时每隔10ms，从下往上清除1px的遮罩；

！DOCTYPE html html hearteta charset=' UTF-8 ' title my JS树/title style body { width : 1000 px；高度： 570像素；背景-图像： URL(图像/树。巴布亚新几内亚)；背景尺寸： 1000像素，570像素；背景-重复：不重复；边距-top : 0px；边距-底部： 0px}/style/head body canvas id=' my canvas ' width=' 1000 px ' height=' 570 px '/canvas script var c=document。getelementbyid('我的画布')；var CTX=c . GetContext(' 2d ')；CTX . fillstyle=' # ffffctx . fill rect(0，0，c.width，c . height)；//矩形遮住背景图像var y=c.heightwindow。set interval(function(){ if(y ^ 2){ CTX。透明矩形(0，y - 1，c.width，y))；y=y-1；} else { window。clearinterval(这个)；//清除定时ctx.clearRect(0，0，c.width，c . height)；} }, 10);//每隔10ms清除1px的遮照/脚本/正文/html画的过程如下：

以上这篇纯射流研究…实现画一棵树的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。