[HTML5技术]利用HTML 5和JavaScript创建绘图应用

[tr][td]

[*]

复制代码


等下。。。HTML5 目前来讲还算新的技术而有些浏览器（?... 就是说你的IE)不支持

canvas标签，所以用以下代码来代替：

[*]

复制代码


准备 HTML5 Canvas: 脚本撰写



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

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

复制代码


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



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

[*]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");

复制代码


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



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

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



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

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

复制代码


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

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

复制代码


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

[*]$('#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()被调用时，整个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){
[*] context.moveTo(clickX[i-1], clickY[i-1]);
[*] }else{
[*] context.moveTo(clickX-1, clickY);
[*] }
[*] context.lineTo(clickX, clickY);
[*] 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){
[*] context.moveTo(clickX[i-1], clickY[i-1]);
[*] }else{
[*] context.moveTo(clickX-1, clickY);
[*] }
[*] context.lineTo(clickX, clickY);
[*] context.closePath();
[*] context.strokeStyle = clickColor;
[*] 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);
[*]}

复制代码


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

[*]function redraw(){
[*] context.lineJoin = "round";
[*] for(var i=0; i < clickX.length; i++)
[*] {
[*] context.beginPath();
[*] if(clickDrag && i){
[*] context.moveTo(clickX[i-1], clickY[i-1]);
[*] }else{
[*] context.moveTo(clickX-1, clickY);
[*] }
[*] context.lineTo(clickX, clickY);
[*] context.closePath();
[*] context.strokeStyle = clickColor;
[*] 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

复制代码


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

[/td][/tr]