當前位置：
首頁 >
js画一棵树
發布時間：2024/3/13
39
豆豆
用純js畫一棵樹。思路：
1、一棵樹的圖片，作為頁面背景；
2、通過html5中的canvas畫布進行遮罩；
3、定時每隔10ms，從下往上清除1px的遮罩；
?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My JS tree</title> <style> body {width: 1000px;height: 570px;background-image: url(image/tree.png);background-size: 1000px, 570px;background-repeat: no-repeat;margin-top: 0px;margin-bottom: 0px; } </style> </head><body><canvas id="mycanvas" width="1000px" height="570px"></canvas><script>var c = document.getElementById("mycanvas");var ctx = c.getContext("2d");ctx.fillStyle = "#ffffff";ctx.fillRect(0, 0, c.width, c.height);//矩形遮住背景圖像var y = c.height;window.setInterval(function() {if (y > 2) {ctx.clearRect(0, y - 1, c.width, y);y = y - 1;} else {window.clearInterval(this);//清除定時 ctx.clearRect(0, 0, c.width, c.height);}}, 10);//每隔10ms清除1px的遮照</script> </body> </html>?
附圖片：
畫的過程如下：
轉載于:https://www.cnblogs.com/mistwalker/p/7473478.html
總結
- 上一篇： oracle查询某个时间段是否在另外一个
- 下一篇： Gradle慢需要6min 现在20s解