Home >Web Front-end >H5 Tutorial >利用HTML 5和JavaScript创建绘图应用

利用HTML 5和JavaScript创建绘图应用

PHP中文网
PHP中文网Original
2016-05-17 09:09:251482browse

让我们来创造一个可以让使用在html5 canva标示元素上动态画图的网页应用,我们的使用者
将需要用到什么工具呢?我脑海中第一个想到的是上色本,用蜡笔来上色,所以第一个
工具就是蜡笔。虽然在真实世界是没办法把蜡笔擦掉,但是我想我们的应用需要可以擦
掉蜡笔,因此第二个工具就是擦布。因为我是一个SharpieR迷(译:文具品牌),所以我们最后一
个工具将是奇异笔。

我们的工具应该可以选择颜色(除了擦布),为了保持简要,所以我们只开放四种色彩
给我们的使用者从中选择。

相同地,也提供四种不同大小的尺寸让用户作图,归纳我们应用应该有的元素:

*3个工具:蜡笔,奇异笔,擦布
*4种色彩以便选择
*4种大小来应用

就像一本上色本子一样,让我们给用户们一个可以上色的对象。我最喜欢的就是:
Rachel Cruthirds 的 Watermelon Duck (译:西瓜小鸭,也可以选择哈密瓜小熊)。

准备 HTML5 Canvas:标示

只要一行代码就可以完成canvas标示元素的建立:其它将以脚本实现。

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

等下。。。HTML5 目前来讲还算新的技术而有些浏览器(?... 就是说你的IE)不支持
canvas标签,所以用以下代码来代替:

<p id="canvasDiv"></p>


准备 HTML5 Canvas: 脚本撰写

为了可以使用我们的canvas元素,我们希望透过其id来获取画布上下文内容以进行存取:

context = document.getElementById(&#39;canvasInAPerfectWorld&#39;).getContext("2d");


然而IE并没有法解析canvas标签,所以如果使用以标示的方法IE将会以错误来处理。

代替的方案就是用JavaScript来创建canvas元素然后附加到我们的canvasDiv p。

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


Internet Explorer compatibility we will also have to include an additional script: ExplorerCanvas.

为了IE的兼容性问题,我们必须添加额外的脚本:

ExplorerCanvas


创健基本画图功能:

在我们添加各种选项之前,先让我们完成HTML5 canvas动态画图的基本功能。这个部份
将包含四个鼠标事件和两个函数:addClick()用来纪录鼠标数据,
redraw()函数将会绘制那些资料。

Mouse Down 事件:当用户在canvas点击时我们将会透过addClick()函数把鼠标位置
纪录在一个数组中,并把一个paint布郎变量设置成true(稍候将会解释)。最后我
们用redraw()函数更新canvas画布。

$(&#39;#canvas&#39;).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 事件:就像笔尖在纸张上移动一样,当用户按住左键时我们想要把他画在canvas画布上。布郎变量paint可以使我们知道这支虚拟的笔状态是在触碰纸面还是在空中。

如果paint直为true我们就把鼠标数据记录并绘制出来。

$(&#39;#canvas&#39;).mousemove(function(e){
  if(paint){
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
});


Mouse Up 事件:笔尖离开纸面;paint布郎变量负责记录。

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


Mouse Leave 事件:如果笔尖整个离开纸的区域,那就让我们忘了你的存在,所以也是把paint设置成false。

$(&#39;#canvas&#39;).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()被调用时,整个canvas会被清空而重新绘制鼠标数据。
实际上我们可以只要重绘制新的区域,这样做的效能会更好,但是我们还是让事情简单一点。
我们设置一些有关笔的属性,颜色,型状和宽度。
之后就是绘制我们纪录的鼠标数据,从第一笔资料绘制一条线到第二笔的位置,以此类推。

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){
      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();
  }
}


添加大小选项

就像我们刚刚添加颜色选项一样,也让我们添加一些可以选择的大小:小,中,大和超大。

我们也需要一组全局变量:clickSize数组和curSize用来储存当前大小选择。

var clickSize = new Array();
var curSize = "normal";


addClick()函数也需要改变,每当用户点击时记录所选择的大小

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
  clickColor.push(curColor);
  clickSize.push(curSize);
}


改动redraw()函数让其支援笔刷大小设置。

function redraw(){
  context.lineJoin = "round";
  class="highlight delete">/* context.lineWidth = 5; */
  for(var i=0; i < clickX.length; i++)
  {                
    context.beginPath();
    if(clickDrag[i] && i){
      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.strokeStyle = clickColor[i];
    context.lineWidth = radius;
    context.stroke();
  }
}


添加工具

我们来实现蜡笔,奇异笔和擦布吧。

我们需要两个新的全局变量:clickTool和curTool。

var clickTool = new Array();
var curTool = "crayon";


先修改addClick()函数,当用户选择工具时,纪录其值。


function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
  if(curTool == "eraser"){
    clickColor.push("white");
  }else{
    clickColor.push(curColor);
  }
  clickColor.push(curColor);
  clickSize.push(curSize);
}

  1. 也改动redraw()函数让其支持新的工具。

function redraw(){
  context.lineJoin = "round";
  for(var i=0; i < clickX.length; i++)
  {                
    context.beginPath();
    if(clickDrag[i] && i){
      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.strokeStyle = clickColor[i];
    context.lineWidth = radius;
    context.stroke();
  }
  if(curTool == "crayon") {
    context.globalAlpha = 0.4;
    context.drawImage(crayonTextureImage, 0, 0, canvasWidth, canvasHeight);
  }
  context.globalAlpha = 1;
}


添加轮廓图案

上色本都会提供一个轮廓图案让我们上色,像是可爱的小狗仔或是蹦蹦跳的兔子,而我则选择西瓜小鸭。..

首先宣告 outlineImage 图案变量

var outlineImage = new Image();


加载轮廓图档

function prepareCanvas(){
  ...
  
  outlineImage.src = "images/watermelon-duck-outline.png";
}


改变我们的redraw()函数,利用canvas属性context的drawImage()方法来绘制我们的轮廓图。

drawImage()函数的参数:我们加载的image对象,我们想要绘制轮廓图的纵横位置以及其长宽大小。

function redraw(){
  ...
  
  context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
}


最终细节

接近完成我们的应用了,最终细节是可选择性的:限制可以作画的方型区域和利用其余的位置制作我们的GUI (按钮)

透过屏蔽canvas元素让画图只会显示在画纸的区域。这个实现用到了clip(),save()和restore方法。目前IE并不支持这些方法。



function redraw()
{
  ...
  
  context.save();
  context.beginPath();
  context.rect(drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
  context.clip();
  
  var radius;
  var i = 0;
  for(; i < clickX.length; i++)
  {
    ... 
  }
  context.restore();
  ...
} // end redraw function

  1. 最后一个步骤就添加按钮,这包括先加载按钮图案然后再显示出来让我们可以交互。这个实现我是利用标准的JavaScript技术,所以我就不废话连篇了(如果你想知道的话你可以去源代码中查)。以上就是整个教程。

以上就是利用HTML 5和JavaScript创建绘图应用的内容,更多相关内容请关注PHP中文网(www.php.cn)!



Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn