HTML Canvas 鼠标画图-阿里云开发者社区

开发者社区> 杰克.陈> 正文

HTML Canvas 鼠标画图

简介: 原文:HTML Canvas 鼠标画图 原文来自:http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app(已被墙) 译文: http://fatkun.com/2011/02/html5-canvas-paint.html 我也不打算全部翻译了…大部分也看的懂,就算看不懂,代码也能看懂….o(╯□╰)o原谅我非常懒…很久没写博客了. ——————-以下是一个简单的例子————————————- html容器 首先,准备个容器,也就是画板了。
+关注继续查看
原文:HTML Canvas 鼠标画图

原文来自:http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app(已被墙)

译文: http://fatkun.com/2011/02/html5-canvas-paint.html

我也不打算全部翻译了…大部分也看的懂,就算看不懂,代码也能看懂….o(╯□╰)o原谅我非常懒…很久没写博客了.

——————-以下是一个简单的例子————————————-

html容器

首先,准备个容器,也就是画板了。

<canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>

但是,由于IE部分版本还是不支持HTML5,那我们可以借用exCanvas兼容IE..

<div id="canvasDiv"></div>

初始化js代码

如果你不管IE使用第一种方法

context = document.getElementById('canvasInAPerfectWorld').getContext("2d");

为了兼容IE,不得不使用下面这个方法,创建一个canvas,然后使用excanvas初始化。当然,为了IE兼容,你需要针对IE加上exCanvas.js

var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
	canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");

开始一个简单的画板

在开始之前,说说怎么做先。它包含了四个鼠标事件和两个方法。addClick是为了记录鼠标的移动点,redraw是把记录的数据画出来。 (提一下,由于原作者使用了jquery,所以你也要把jquery引用进来。)

鼠标按下事件(Mouse Down Event)

当鼠标按下时,把paint设为true,表示正在画,鼠标没松开。把鼠标点记录下来。

$('#canvas').mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;
 
  paint = true;
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
  redraw();
});

鼠标移动事件(Mouse Move Event)

当按下鼠标的时候,鼠标移动就把点记录下来并画出来。

$('#canvas').mousemove(function(e){
  if(paint){//是不是按下了鼠标
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
});

鼠标松开事件(Mouse Up Event)

$('#canvas').mouseup(function(e){
  paint = false;
});

鼠标移开事件(Mouse Leave Event)

$('#canvas').mouseleave(function(e){
  paint = false;
});

addClick方法

记录鼠标坐标点

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
 
function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}

redraw方法

目前这个redraw方法是每次都清空画板,然后重新把所有的点都画过,虽然效率不高,但是这样看起来还是挺简单的。

function redraw(){
  canvas.width = canvas.width; // Clears the canvas
 
  context.strokeStyle = "#df4b26";
  context.lineJoin = "round";
  context.lineWidth = 5;
 
  for(var i=0; i < clickX.length; i++)
  {
    context.beginPath();
    if(clickDrag[i] && i){//当是拖动而且i!=0时,从上一个点开始画线。
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
     context.stroke();
  }
}

最终效果

点我看效果,赶紧点我

最后

这上面的只是个简单的例子啦。。。原作者还在上面代码的基础上加了颜色,大小,橡皮擦等功能呢~~想看的FQ去看作者博客吧。。这年头不会FQ还真不好意思见人。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Elastic Engineering】Elasticsearch 中的一些重要概念: cluster, node, index, document, shards 及 replica
Elasticsearch 中的一些重要概念: cluster, node, index, document, shards 及 replica
2 0
【Elastic Engineering】Elasticsearch 中的一些重要概念: cluster, node, index, document, shards 及 replica
Elasticsearch 中的一些重要概念: cluster, node, index, document, shards 及 replica
6 0
阿里巴巴数据库分库分表的实践(5)
阿里巴巴数据库分库分表的实践(5)
4 0
用阿里云飞天计划提供的CES服务器为高中生活搭建“故事簿”网页
一名刚踏入大学的大一本科生利用阿里云提供的CES服务器为高中“故事簿”搭建网页
15 0
ECS初体验的感受
ECS初体验的感受 云翼计划
15 0
【Elastic Engineering】Kibana:如何在 Linux,MacOS 及 Windows 上安装 Elastic 栈中的 Kibana
Kibana:如何在 Linux,MacOS 及 Windows 上安装 Elastic 栈中的 Kibana
6 0
使用阿里云ECS搭建个人网站
学习在ECS上如何搭建个人网站
23 0
阿里巴巴数据库分库分表的实践(4)
阿里巴巴数据库分库分表的实践(4)
6 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载