HTML5 canvas 做画板画图 可以做电子白板

HTML5 canvas 做画板画图 可以做电子白板

<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5 canvas 做画板画图 可以做电子白板</title>
        <style type="text/css">
        <!--
          #container { position: relative;}
          #imageView { border: 1px solid #000; }
        --></style>
  </head>
  <body>
    <div id="container">
      <canvas id="imageView" width="800" height="500">
      </canvas>
    </div>
    <script type="text/javascript">
	var canvas;
var context;
var tool;

/**
 * called on window load.
 */
if(window.addEventListener){
    window.addEventListener('load',
            init(),
            false);
}

/**
 * init.
 */
function init(){
    /**
     * find the canvas element.
     */
    canvas = document.getElementById('imageView');
    if(!canvas){
        return;
    }
    if(!canvas.getContext){
        return;
    }

    /**
     * get the 2D canvas context.
     */
    context = canvas.getContext('2d');
    if(!context){
        return;
    }

    /**
     * pencil tool instance.
     */
    tool = new tool_pencil();

    /**
     * attach the mousedown, mousemove and mouseup event listeners.
     */
    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);

}

/**
 * This painting tool
 * works like a drawing pencil
 * which tracks the mouse movements.
 *
 * @returns {tool_pencil}
 */
function tool_pencil(){
    var tool = this;
    this.started = false;

    /**
     * This is called when you start holding down the mouse button.
     * This starts the pencil drawing.
     */
    this.mousedown = function (ev){
        /**
         * when you click on the canvas and drag your mouse
         * the cursor will changes to a text-selection cursor
         * the "ev.preventDefault()" can prevent this.
         */
        ev.preventDefault();
        context.beginPath();
        context.moveTo(ev._x,ev._y);
        tool.started = true;
    };

    /**
     * This is called every time you move the mouse.
     * Obviously, it only draws if the tool.started state is set to true
     */
    this.mousemove = function (ev){
        if(tool.started){
            context.lineTo(ev._x,ev._y);
            context.stroke();
        }
    };

    /**
     * This is called when you release the mouse button.
     */
    this.mouseup = function (ev) {
        if(tool.started){
            tool.mousemove(ev);
            tool.started = false;
        }
    };
}

/**
 * general-purpose event handler.
 * determines the mouse position relative to the canvas element.
 *
 * @param ev
 */
function ev_canvas(ev){
    var x,y;
    if(ev.offsetX || ev.offsetY == 0){
        ev._x = ev.offsetX;
        ev._y = ev.offsetY;
    }

    /**
     * call the event handler of the tool.
     */
    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
}

	</script>
  </body>
</html>

效果图:

时间: 2024-12-14 18:41:42

HTML5 canvas 做画板画图 可以做电子白板的相关文章

一款基于HTML5 Canvas的画板涂鸦动画

今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canvas的画板涂鸦动画应用,功能和之前那个类似,但是新增了回撤和清空画板的操作,实现思路也基本类似.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <canvas id="canvas" cl

html5 canvas 涂鸦画板

html5 canvas 的涂鸦画板,可以加载图片进行涂鸦,也可以下载服务器使用的php上传的图片不能超过1M,只能是jpg或者png 格式的演示地址的服务器网速不怎么样,读取文件可能很慢,到达100%的时候点击读取文件,如果没显示就多点几次?1. [代码]主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&quo

简介 jCanvas:当 jQuery遇上HTML5 Canvas

HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在这篇文章中,我将向你介绍 jCanvas,一个基于 jQuery的免费且开源的 HTML5的Canvas API. 如果你使用 jQuery 进行开发,jCanvas能够使用 jQuery更简单,更快速的完成一些非常炫酷的 canvas画布及交互效果. 什么是 jCanvas ? jCanvas 官网是这样解释的: "jCanvas is a JavaScript li

8个经典炫酷的HTML5 Canvas动画欣赏

HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮助. 1.HTML5 Canvas可拖动的弹性大树摇摆动画 今天让我们继续来分享一个炫酷的HTML5动画,它是一款基于HTML5 Canvas的大树摇摆动画,这款HTML5动画的特点是我们可以拖拽树枝,从而让整棵树摇摆起来,这样就真实地模拟了大树从摇摆到静止的整个过程,相当逼真. 在线演示     

用HTML5 Canvas做一个画图板

使用HTML5可以非常简单地在canvas上实现画图应用,用支持html5的浏览器便可在下面的区域进行绘画,要看到演示效果,请确保你的浏览器支持HTML5: 功能很简单,原理其实和拖放是类似的,主要是三个事件: 在canvas 上绑定mousedown 事件以标志绘画的开始(调用moveTo 移动画笔)澳门娱乐场 在document 上绑定mousemove 事件来处理绘画时的行为(调用lineTo 以及stroke 进行绘画) 在document 上绑定mouseup 事件以标志绘画的结束(解

html5 Canvas画图3:1px线条模糊问题

点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图: 这样的线条显然不是我们想要的. 这篇文章的目的就是弄清楚里面的原理,以及解决它. 大家都知道屏幕上最小的显示尺寸就是1像素,虽然小于1像素的东西可能显示不出来,但计算机可不管,他会试着画一下. 其实像素终究来说也是一个单位,假如我们把画布放大到足够大,足以看

基于HTML5 Canvas和jQuery 的画图工具的实现

简介 HTML5 提供了强大的Canvas元素,使用Canvas并结合Javascript 可以实现一些非常强大的功能.本文就介绍一下基于HTML5 Canvas 的画图工具的实现.废话少说,先看成品: 该应用是遵循所见即所得(WYSIWYG, What you see is what you get)原则设计的,它具有以下功能: 1. 可以绘制自由曲线.直线.矩形框和文字: 2. 可以根据需要定义线段和矩形框的颜色和宽度: 3. 你可以需要字体的大小.颜色.字体: 4. 支持undo.redo

[canvas]通过动态生成像素点做绚丽效果

本例中的粒子就是实实在在的像素,由js代码在canvas上动态生成的像素点!这些像素点通过一个运动方法有规律地动了起来.透过这个思路,我们可以想到很多很炫的效果,但是这个性能有待考察.实验证明,动态控制太多像素点的话绝对会卡的!在做效果方面有经验的朋友,请提出宝贵意见!这个思路走得通么? <!doctype html> <html> <head> <title>智能粒子</title> <meta charset='utf-8' />

Html5新特性 &amp;lt;canvas&amp;gt;画板画直线

 以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht