Canvas_可涂抹画布

最新推荐文章于 2024-09-17 13:42:29 发布

aocan7139

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量73

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/inoro/p/4492904.html

版权

最近做一个项目，其中有个小功能就是刮刮乐！

利用到了HTML5画布 canvas

< html >
< head >
     < title >Canvas_可涂抹画布 </ title >
     < style > #canvas{ background: url(http://g.hiphotos.baidu.com/image/pic/item/1f178a82b9014a9058672000aa773912b31bee36.jpg); height: 300px; width: 200px;} </ style >
     < script type ="text/javascript" >
         /* *事件绑定方法* */
         function addEvent(object,eventType,fn){
             if(object.attachEvent){
                object.attachEvent('on'+eventType,fn); // ie绑定事件
            } else if(object.addEventListener){
                object.addEventListener(eventType,fn, false); // 谷歌与火狐绑定事件
            }
        }
         /* *阻止默认事件* */
         function preDef(e){
             var e=e || window.event;
             if(e.preventDefault){
                e.preventDefault();
            } else{
                e.returnValue= false;
            }
        }


        addEvent(window,'load', function(){
             /* *阻止网页拖动* */
            addEvent(document,"tounchmove", function(){
                preDef(e);
            });

             /* *canvas 画布* */
             // var canvasElement=document.getElementById("canvas").getContext("2d");
             function createCanvas(parent,width,height){
                canvasElement=document.createElement("canvas");
                canvasContext=canvasElement.getContext("2d");
                canvasElement.width= width || 320;
                canvasElement.height= height || 480;
                canvasElement.id="canvasTag";
                parent.appendChild(canvasElement);

            }


             var canvasParent=document.getElementById("canvas");
             // alert(createCanvas(canvasParent,"500","500"));

             function init(drawObj,width,height,fillColor){
                 /* *实例化画布* */
                createCanvas(drawObj,width,height);

                 /* *绘制已填充矩形* */
                 var ctx=canvasContext;
                ctx.fillStyle=fillColor;
                ctx.fillRect(0,0,width,height);

                ctx.fillCircle = function(x, y, radius, fillColor) {
                   this.fillStyle = fillColor;
                   this.beginPath();
                   this.moveTo(x, y);
                   this.arc(x, y, radius, 0, Math.PI * 2, false);
                   this.fill();
                };

                 // 做效果测试只用了mousemove 大家可以做兼容移动设备当然首先得做平台的navigator.userAgent 判断
                addEvent(canvasElement,"mousemove", function(e){
                     var x = e.pageX - this.offsetLeft;
                     var y = e.pageY - this.offsetTop;
                     var radius = 20;
                     var fillColor = '#ff0000';
                    ctx.globalCompositeOperation = 'destination-out';
                    ctx.fillCircle(x, y, radius, fillColor);
                });

            }
            init(canvas,"200","300","#ccc");
        });

     </ script >
</ head >
< body >
     < div id ="canvas" ></ div >
< body >

</html>

转载于:https://www.cnblogs.com/inoro/p/4492904.html