首页 > 其他 > 详细

canvas实现平铺

时间:2016-01-30 18:21:12      阅读:252      评论:0      收藏:0      [点我收藏+]

代码:

技术分享
 1 /**
 2  * Created by Administrator on 2016/1/30.
 3  */
 4 function draw(id){
 5     var canvas = document.getElementById(id);
 6     var context = canvas.getContext(‘2d‘);
 7     var img = new Image();
 8     img.src = "图像/1234.gif";
 9     img.onload = function (){
10         var ptrn = context.createPattern(img,‘no-repeat‘);
11         context.fillStyle = ptrn;
12         context.fillRect(0,0,300,200);
13     }
14 }
View Code

用到的方法为createPattern()方法。

  格式:

     createPattern(image,repetitionStyle):

         image:图像。

        repetitionStyle:平铺方式。有4个值,

                repeat:在各个方向上平铺,

                no-repeat:只使用一次,

                repeat-x:在x轴上平铺,

                repeat-y:在y轴上平铺。

    

 

canvas实现平铺

原文:http://www.cnblogs.com/chenluomenggongzi/p/5171231.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!