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

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

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

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

＊3个工具：蜡笔，奇异笔，擦布
＊4种色彩以便选择
＊4种大小来应用

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

准备 HTML5 Canvas：标示

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

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

复制代码

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

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

复制代码

准备 HTML5 Canvas: 脚本撰写

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

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

复制代码

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

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

1. var canvasDiv = document.getElementById('canvasDiv');
   
2. canvas = document.createElement('canvas');
   
3. canvas.setAttribute('width', canvasWidth);
   
4. canvas.setAttribute('height', canvasHeight);
   
5. canvas.setAttribute('id', 'canvas');
   
6. canvasDiv.appendChild(canvas);
   
7. if(typeof G_vmlCanvasManager != 'undefined') {
   
8. canvas = G_vmlCanvasManager.initElement(canvas);
   
9. }
   
10. 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画布。

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

复制代码

Mouse Move 事件：就像笔尖在纸张上移动一样，当用户按住左键时我们想要把他画在canvas画布上。布郎变量paint可以使我们知道这支虚拟的笔状态是在触碰纸面还是在空中。

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

1. $('#canvas').mousemove(function(e){
   
2. if(paint){
   
3. addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
   
4. redraw();
   
5. }
   
6. });

复制代码

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

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

复制代码

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

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

复制代码

以下是addClick函数的实现，用来记录鼠标按下的位置：

1. var clickX = new Array();
   
2. var clickY = new Array();
   
3. var clickDrag = new Array();
   
4. var paint;
   
5. 
   
6. function addClick(x, y, dragging)
   
7. {
   
8. clickX.push(x);
   
9. clickY.push(y);
   
10. clickDrag.push(dragging);
    
11. }

复制代码

redraw()函数是魔法发生的地方，每当redraw()被调用时，整个canvas会被清空而重新绘制鼠标数据。
实际上我们可以只要重绘制新的区域，这样做的效能会更好，但是我们还是让事情简单一点。
我们设置一些有关笔的属性，颜色，型状和宽度。
之后就是绘制我们纪录的鼠标数据，从第一笔资料绘制一条线到第二笔的位置，以此类推。

1. function redraw(){
   
2. canvas.width = canvas.width; // Clears the canvas
   
3. 
   
4. context.strokeStyle = "#df4b26";
   
5. context.lineJoin = "round";
   
6. context.lineWidth = 5;
   
7. 
   
8. for(var i=0; i < clickX.length; i++)
   
9. {
   
10. context.beginPath();
    
11. if(clickDrag[i] && i){
    
12. context.moveTo(clickX[i-1], clickY[i-1]);
    
13. }else{
    
14. context.moveTo(clickX[i]-1, clickY[i]);
    
15. }
    
16. context.lineTo(clickX[i], clickY[i]);
    
17. context.closePath();
    
18. context.stroke();
    
19. }
    
20. }

复制代码

添加大小选项

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

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

1. var clickSize = new Array();
   
2. var curSize = "normal";

复制代码

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

1. function addClick(x, y, dragging)
   
2. {
   
3. clickX.push(x);
   
4. clickY.push(y);
   
5. clickDrag.push(dragging);
   
6. clickColor.push(curColor);
   
7. clickSize.push(curSize);
   
8. 
   
9. }

复制代码

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

1. function redraw(){
   
2. context.lineJoin = "round";
   
3. class="highlight delete">/* context.lineWidth = 5; */
   
4. for(var i=0; i < clickX.length; i++)
   
5. {
   
6. context.beginPath();
   
7. if(clickDrag[i] && i){
   
8. context.moveTo(clickX[i-1], clickY[i-1]);
   
9. }else{
   
10. context.moveTo(clickX[i]-1, clickY[i]);
    
11. }
    
12. context.lineTo(clickX[i], clickY[i]);
    
13. context.closePath();
    
14. context.strokeStyle = clickColor[i];
    
15. context.lineWidth = radius;
    
16. context.stroke();
    
17. }
    
18. }

复制代码

添加工具

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

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

1. var clickTool = new Array();
   
2. var curTool = "crayon";

复制代码

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

1. function addClick(x, y, dragging)
   
2. {
   
3. clickX.push(x);
   
4. clickY.push(y);
   
5. clickDrag.push(dragging);
   
6. if(curTool == "eraser"){
   
7. clickColor.push("white");
   
8. }else{
   
9. clickColor.push(curColor);
   
10. }
    
11. clickColor.push(curColor);
    
12. clickSize.push(curSize);
    
13. }

复制代码

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

1. function redraw(){
   
2. context.lineJoin = "round";
   
3. for(var i=0; i < clickX.length; i++)
   
4. {
   
5. context.beginPath();
   
6. if(clickDrag[i] && i){
   
7. context.moveTo(clickX[i-1], clickY[i-1]);
   
8. }else{
   
9. context.moveTo(clickX[i]-1, clickY[i]);
   
10. }
    
11. context.lineTo(clickX[i], clickY[i]);
    
12. context.closePath();
    
13. context.strokeStyle = clickColor[i];
    
14. context.lineWidth = radius;
    
15. context.stroke();
    
16. }
    
17. if(curTool == "crayon") {
    
18. context.globalAlpha = 0.4;
    
19. context.drawImage(crayonTextureImage, 0, 0, canvasWidth, canvasHeight);
    
20. }
    
21. context.globalAlpha = 1;
    
22. }

复制代码

添加轮廓图案

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

首先宣告 outlineImage 图案变量

1. var outlineImage = new Image();

复制代码

加载轮廓图档

1. function prepareCanvas(){
   
2. ...
   
3. 
   
4. outlineImage.src = "images/watermelon-duck-outline.png";
   
5. }

复制代码

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

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

1. function redraw(){
   
2. ...
   
3. 
   
4. context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
   
5. }

复制代码

最终细节

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

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

1. function redraw()
   
2. {
   
3. ...
   
4. 
   
5. context.save();
   
6. context.beginPath();
   
7. context.rect(drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
   
8. context.clip();
   
9. 
   
10. var radius;
    
11. var i = 0;
    
12. for(; i < clickX.length; i++)
    
13. {
    
14. ...
    
15. }
    
16. context.restore();
    
17. ...
    
18. } // end redraw function

复制代码

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

• 没有相关文章