CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5 canvas实现画笔功能

发布时间:『 2016-11-03 21:02』  博客类别:WEB前端  阅读(3780) 评论(0)

接着上一篇HTML5 canvas实现的瓜瓜卡功能,本篇文章再用canvas 实现一个画笔功能,分享给大家!

HTML5 Canvas还有一个比较实用的应用,那就是网络画板,这样我们就可以在网页上直接进行画图操作。今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能,我们可以自定义笔刷的类型、粗细、颜色,也可以定义画布的大小和背景颜色等。我们也可以对这款HTML5画图工具进行扩展,让它的画图功能更加完善。

布局

<div style="width:300px;height:500px;margin:10px;border-radius:10px;overflow:hidden;float:right;">
      <canvas id="canvas2" width="300px" height="500px" style="background-color:lightblue;"></canvas>
</div>

设置canvas画布

var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");

画笔功能函数

var draw=function(){
	context2.fillRect(event.offsetX,event.offsetY,10,10);
};

为canvas元素onmousedown和onmouseup事件

context2.font='20px Arial';
context2.strokeText('NICK画笔',100,30);//写个头
//1. 为canvas元素onmousedown和onmouseup事件
canvas2.onmousedown = function(){            // 启用画笔功能 - 绑定鼠标跟随事件
	bindHandler(canvas2,'mousemove',draw,false);
}
canvas2.onmouseup = function(){            // 停止画笔功能 - 解绑鼠标跟随事件
	removeHandler(canvas2,"mousemove",draw,false);
}

画图工具的画笔功能到底结束!

附上完整代码:

<!DOCTYPE html><html>
 <head>
  <title>Canvas lottery brush nick</title>
  <meta charset="utf-8"/>
 </head>
 <body>
 <div style="width:640px;margin:auto;">
     <!--刮刮乐-->
     <div id="lottery" style="width:300px;height:500px;margin:10px;background-color:
	 lightskyblue;border-radius:5px;float:left;">
         <div style="width:300px;height:100px;line-height:100px;text-align:center;
		 font-size:33px;color:blueviolet;">NICK彩票</div>
         <div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;
		 display:flex;justify-content:center;align-items:center;flex-direction:column;">
             <span>祝</span>
             <span>君</span>
             <span>中</span>
             <span>奖</span>
         </div>
         <div id="canvasArea" style="width:300px;height:200px;position:relative;">
             <div style="width:300px;height:200px;position:absolute;
			 top:0;left:0;z-index:1;text-align:center;line-height:200px;
			 font-weight:bold;font-size:56px;color:indianred;">一等奖</div>
             <canvas id="canvas" width="300px" height="200px" 
			 style="position:absolute;top:0;left:0;z-index:2;"></canvas>
         </div>
     </div>

     <!--画图工具画笔功能-->
     <div style="width:300px;height:500px;margin:10px;
	 border-radius:10px;overflow:hidden;float:right;">
         <canvas id="canvas2" width="300px" height="500px" 
		 style="background-color:lightblue;"></canvas>
     </div>
 </div>

 <div style="text-align:center;">
     <p>刮刮乐:鼠标按住不放,拖动开始刮奖!</p>
     <p>画笔:鼠标按住不放,拖动画画!</p>
 </div>
    <script>
        //插件方法封装区
        ;(function(){            
		// 事件绑定            
		window.bindHandler = (function() {                
			if (window.addEventListener) {// 标准浏览器
                    return function(elem, type, handler) {                        
					// elem:节点    type:事件类型   handler:事件处理函数
                    // 最后一个参数为true:在捕获阶段调用事件处理程序;
					//为false:在冒泡阶段调用事件处理程序。
					//注意:ie没有这个参数                        
					elem.addEventListener(type, handler, false);
                    }
                } else if (window.attachEvent) {// IE浏览器
                    return function(elem, type, handler) {
                        elem.attachEvent("on" + type, handler);
                    }
                }
            }());            
			// 事件解除           
			window.removeHandler = (function() {                
				if (window.removeEventListener) {// 标准浏览器
                    return function(elem, type, handler) {
                        elem.removeEventListener(type, handler, false);
                    }
                } else if (window.detachEvent) {// IE浏览器
                    return function(elem, type, handler) {
                        elem.detachEvent("on" + type, handler);
                    }
                }
            }());
        }());        //命名区

        var canvas = document.getElementById("canvas");       
		var context = canvas.getContext("2d");        
		var canvas2 = document.getElementById("canvas2");        
		var context2 = canvas2.getContext("2d");        
		var brush=function(){//刮奖            
			context.clearRect(event.offsetX,event.offsetY,20,20);
        };        
		var draw=function(){//写字           
		context2.fillRect(event.offsetX,event.offsetY,10,10);  
	};        //功能实现区

        //刮刮乐

        // 1. 绘制刮奖区域        
		context.fillStyle='#A9AB9D';
        context.fillRect(10,10,280,180);
        context.fillStyle='#000';
        context.font='50px Arial';
        context.fillText('刮奖区',75,115);
		//字体变色        
		setInterval(function(){
            document.getElementById('txt').style.color = 
			document.getElementById('txt').style.color=='peachpuff' 
			? 'yellow' : 'peachpuff';
        },500);        
		//2. 为canvas元素onmousedown和onmouseup事件        
		canvas.onmousedown = function(){            
		// 鼠标按下时 - 绑定鼠标跟随事件           
			bindHandler(canvas,'mousemove',brush,false);
        }
        canvas.onmouseup = function(){            
			// 停止刮奖功能 - 解绑鼠标跟随事件            
			removeHandler(canvas,"mousemove",brush,false);
        }        
		//画笔       
		context2.font='20px Arial';
        context2.strokeText('NICK画笔',100,30);//写个头
        //1. 为canvas元素onmousedown和onmouseup事件       
		canvas2.onmousedown = function(){            
		// 启用画笔功能 - 绑定鼠标跟随事件            
		bindHandler(canvas2,'mousemove',draw,false);
        }
        canvas2.onmouseup = function(){            
		// 停止画笔功能 - 解绑鼠标跟随事件            
		removeHandler(canvas2,"mousemove",draw,false);
        }    
	</script>
 </body>
 </html>

代码写完了,我也想说点其他的:

上面js代码中,有不少注释,我将其分为几个区域:插件方法封装区、命名区、功能实现区、刮刮乐区以及画笔区等,我感觉这样写加上一些注释,能使代码能加简洁,便于以后的维护!当然这只是个人观点,欢迎各位点击我博客右边公告栏的qq交流交流!

来看看效果,玩玩吧!


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   HTML5     canvas     web前端     画笔功能     fillRect  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有