Html5 Canvas+Javascript实现一个简单画图程序（二）

最新推荐文章于 2022-10-24 18:24:24 发布

木易光

最新推荐文章于 2022-10-24 18:24:24 发布

阅读量3k

点赞数 1

分类专栏： Web前端文章标签： canvas html5 HTML5 javascript JavaScript 铅笔画图

本文链接：https://blog.csdn.net/sunshinevvv/article/details/8194864

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上篇文章已经知道了绘制图形的基本代码了，但是还不能根据鼠标来绘制，本文将会介绍方法。

js的鼠标事件：

我们使用到了四个：mousedown（鼠标按下）mouseup（鼠标松开）mousemove（鼠标移动）mouseout（鼠标离开）.从字面意思就很好理解，分别是鼠标按下、松开、移动、离开时就会触发。

关于这几个事件，有一篇文章做了很好的总结。http://www.cnblogs.com/rubylouvre/archive/2009/08/24/1552862.html

　　后面会有这几个事件的实际运用的代码。

这里有一个小小的细节，如果你的canvas是包在一个div里面的话，你想要取得鼠标的坐标的话，一定要减去div的相对偏移，因为canvas画图函数里面的坐标都是相对canvas左上角的。大致说明如下：

铅笔绘图

这一点我是向http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/#demo-simple这个网站学习的。【写到现在我已经引用了三个网站了，其实我在编这个东西的时候还是上网搜集了好多的资料的，好多东西自己以前也不会。】

　　首先设置两个数组clickX, clickY，然后监听鼠标在canvas上面的点击-移动-松开这一系列事件，把该过程中的所经过的所有点的坐标写进刚刚的两个数组里。写完之后再用一个方法取出数组的内容把刚刚的路线画出来，用的是上一篇文章里讲到的lineTo方法，虽然是lineTo，但是是在一个很细微的粒度下，所以肉眼看起来还算是平滑的曲线。这样，在鼠标拖动的过程中，我们一次次地往数组里面写入坐标点，然后清除canvas上面的内容，在把坐标点画进来。（这种方法是全局刷新的，据说有一种局部刷新的手段，会高效点吧。但是目前来看全局刷新的性能还可以接受）
　　这里还牵扯到一个略微蛋疼的问题，canvas不能画点。所以当用户只是点了一下某区域然后并未移动鼠标的情况下就松开，是没有一个对应的方法叫drawPoint或者什么的把一个点画在这个坐标上面的。这里我用了一个折中的方法，我在原地画了一个很小的实心圆。
　　还有一个小细节，就是如何区分以下两个事件： A.用户在canvas上面点击了一下然后在canvas上拖动，B.用户没有点击或是在canvas之外的区域点击一下然后在canvas上面拖动。所以我们需要一个状态量来显示用户是不是真的在画。就交isPainting吧。
　　说了这么多，让我们来看一下目前的代码吧：
　　
　　demo.html:
　　

<!DOCTYPE html>
　　<html>
　　<head>
　　	<title>Simple Demo</title>
　　	<style>
　　    body {
　　      margin: 0px;
　　      padding: 0px;
　　    }
　　    #myCanvas {
　　      border: 1px solid #9C9898;
　　    }
　　 </style>
　　</head>
　　<body>
　　	<canvas id = "myCanvas" width = "800px" height = "500px"></canvas>
　　	<script type = "text/javascript" src = "main.js"></script>
　　</body>
　　</html>

　　main.js:
　　

var canvas, context, 
　　	isPainting,
　　	clickX, clickY, clickDrag;
　　	
　　var mouseDown = function(e){
　　	var mouseX = e.pageX;
　　  var mouseY = e.pageY;
　　	isPainting = true;
　　  addClick(mouseX, mouseY, false);
　　  redraw();
　　}
　　var mouseUp = function(e){
　　	isPainting = false;
　　	redraw();
　　}
　　var mouseMove = function(e){
　　	if(isPainting){
　　		var mouseX = e.pageX;
　　		var mouseY = e.pageY;
　　		addClick(mouseX, mouseY, true);
　　		redraw();
　　	}
　　
　　}
　　var mouseOut = function(e){
　　	isPainting = false;
　　}
　　
　　function addClick(mouseX, mouseY, isDragging){
　　	clickX.push(mouseX);
　　	clickY.push(mouseY);
　　	clickDrag.push(isDragging);
　　}
　　
　　//重绘
　　function redraw(){
　　	context.clearRect (0 , 0, canvas.width , canvas.height );
　　	context.strokeStyle = "#000000";
　　	var numOfPts = clickX.length;
　　	for(var i=0; i<numOfPts; i++){
　　		context.beginPath();
　　		if(clickDrag[i]){
　　			context.moveTo(clickX[i-1], clickY[i-1]);
　　			context.lineTo(clickX[i], clickY[i]);
　　		}else{
　　			context.arc(clickX[i], clickY[i], 0.5, 0, 2*Math.PI, true);
　　		}
　　		context.closePath();
　　		context.stroke();
　　	}
　　}
　　
　　//初始化
　　function init(){
　　	canvas = document.getElementById("myCanvas");
　　	context = canvas.getContext("2d");
　　	isPainting = false;
　　	clickX = new Array();
　　	clickY = new Array();
　　	clickDrag = new Array();
　　	//鼠标事件
　　	canvas.onmousedown = mouseDown;
　　	canvas.onmouseup = mouseUp;
　　	canvas.onmousemove = mouseMove;
　　	canvas.onmouseout = mouseOut;
　　}
　　
　　window.onload = init();

　　这样就实现了铅笔绘图。如果你想添加新的功能，比如：修改颜色，则可以设置一个参数比如curColor什么的，然后给一个方法去动态修改，并且在redraw中使用这个参数作为strokeStyle。对了，stroke的风格是很多变的，这里只是最基本的，你可以改变很多。

木易光

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Html5 Canvas+Javascript实现一个简单画图程序（二）

上篇文章已经知道了绘制图形的基本代码了，但是还不能根据鼠标来绘制，本文将会介绍方法。js的鼠标事件：我们使用到了四个：mousedown（鼠标按下）mouseup（鼠标松开）mousemove（鼠标移动）mouseout（鼠标离开）.从字面意思就很好理解，分别是鼠标按下、松开、移动、离开时就会触发。关于这几个事件，有一篇文章做了很好的总结。http://www.cnblogs.com/
复制链接

扫一扫