使用HTML5 Canvas为图片填充颜色和纹理的教程

2019-01-28 15:17:50王振洲
  •         var img = new Image();            img.src = "8-1.jpg";   
  •         img.onload = function(){                var pattern = context.createPattern(img, "repeat");   
  •             context.fillStyle = pattern;                context.fillRect(0,0,800,600);   
  •         }      
  •     }    </script>   
  • </body>    </html>  

    运行结果:
    2016321113752010.jpg (850×500)

    这里使用了Image的onload事件,它的作用是对图片进行预加载处理,即在图片加载完成后才立即除非其后function的代码体。这个是必须的,如果不写的话,画布将会显示黑屏。因为没有等待图片加载完成就填充纹理,导致浏览器找不到图片。
    这里使用了"repeat",童鞋们也可尝试使用一下其他三个值,看看会有什么不同的效果。也可以自己找一下其他的图片尝试填充,看看效果。