相比了下Qt quick的canvas和HTML5的canvas，发现HTML5 Canvas在同样绘制绘制操作下性能比Qt的canvas强很多，附上一个HTML5 canvas画笔一例子

var DW  = function( canvasid){

   this._points = [];

   this._canvas = document.getElementById( canvasid );

   this._ctx = this._canvas.getContext("2d");

   this._isPressed = false;

   this._color  = "#223344";

   this._widht = 8;

   var self = this;

   function __init(){

      self._ctx.lineCap = "round";

      self._ctx.lineJoin="round";

      self._ctx.strokeStyle = self._color;

      self._ctx.lineWidth = self._widht;

   };

   this._addPoints = function( x, y ){

    this._points.push({x: x , y : y });

   };

   this._capturePath = function( x , y ){

    this._addPoints( x,  y );

   };

   this._prepareDrawing = function( x, y ){

    this._points.length = 0 ;

    this._addPoints( x, y );

    this._ctx.moveTo( x, y );

   };

   this._render = function(){

   	console.log("renderrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr");

    var p1 = this._points[0] , p2 =this._points[1];

    this._ctx.save();

    this._ctx.beginPath();

    if(this._points.length === 2 && p1.x === p2.x && p1.y===p2.y ){

      p1.x -= 0.5 ;

      p1.y -= 0.5 ;

    }

    this._ctx.moveTo( p1.x , p1.y );

    for( var i = 1 , len = this._points.length ; i < len ; i++ ){

      var mp = {x : (p1.x + (p2.x - p1.x ) /2) , y : (p1.y + (p2.y - p1.y)/2)};

      this._ctx.quadraticCurveTo( p1.x , p1.y , mp.x , mp.y );

      p1 = this._points[i] ; p2 = this._points[i+1];

    }

    this._ctx.lineTo( p1.x , p1.y );

    this._ctx.stroke();

    this._ctx.restore();

   }

   this._clearContext = function(){

      this._ctx.clearRect(0,0, this._canvas.width , this._canvas.height);

   }

   __init();

};

DW.prototype.setColor = function(color){

  this._color = color;

  this._ctx.strokeStyle = color;

};

DW.prototype.setWidth = function( w ){

  this._widht = w;

  this._ctx.lineWidth = w ;

}

　　

应用

<!doctype html>

  <html>

    <head>

     <title> Canvas </title>

     <style type="text/css">

       canvas{

       	 border-radius: 8;

       	 border-style: solid;

       	 border-color: 'gray'

       }

     </style>

     <script ==> 引用上头JS文件 =========/script>

    </head>

    <body>

      <canvas id="_canvas" width='500' height="400" ></canvas>

      <script type="text/javascript">

       var $ = function( id ){ return document.getElementById(id);}

       var c = $('_canvas');

       var dObject = new DW("_canvas");

       function on_mouse_press(e){

                dObject.setColor("#778899");

                dObject._prepareDrawing(e.offsetX,e.offsetY);

                dObject._capturePath(e.offsetX,e.offsetY);

                dObject._render();

                dObject._isPressed = true;

        };

        function on_mouse_move( e) {

                 if( dObject._isPressed === true ){

                      dObject._capturePath(e.offsetX,e.offsetY);

                      dObject._clearContext();

                     dObject._render(); //redraw

         }

      };

       function on_mouse_up(e){

           dObject._isPressed = false;

       }

       c.addEventListener('mousedown',function(e){

       	on_mouse_press(e);

       },false);

       c.addEventListener('mousemove' , function(e){

       	 on_mouse_move(e);

       },false);

       c.addEventListener('mouseup',function(e){

       	  on_mouse_up(e);

       },false);

      </script>

    </body>

  </html>

　　

Html5 Canvas一个简单的画笔例子的更多相关文章

  1. <html5 canvas>一个简单的矩形

    Html5: <!doctype html> <html> <head> <meta charset="UTF-8"> <ti ...

  2. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  3. 使用Multiplayer Networking做一个简单的多人游戏例子-2/3（Unity3D开发之二十六）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51007512 ...

  4. 一个简单的CORBA例子

    因为对CORBA分析的需要,这里写一个简单的CORBA例子.从JDK1.2开始,JDK中集成了ORB的实现,本例子使用了JDK1.7,对于JDK1.2+应该都没有问题.这个例子实现一个简单的加减乘除的 ...

  5. 轻松创建nodejs服务器（1）：一个简单nodejs服务器例子

    这篇文章主要介绍了一个简单nodejs服务器例子,本文实现了一个简单的hello world例子,并展示如何运行这个服务器,需要的朋友可以参考下   我们先来实现一个简单的例子,hello world ...

  6. 使用Multiplayer Networking做一个简单的多人游戏例子-3/3（Unity3D开发之二十七）

    使用Multiplayer Networking做一个简单的多人游戏例子-1/3 使用Multiplayer Networking做一个简单的多人游戏例子-2/3 使用Multiplayer Netw ...

  7. 使用Multiplayer Networking做一个简单的多人游戏例子-1/3（Unity3D开发之二十五）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51006463 ...

  8. 一个简单的cmake例子

    一个简单的cmake例子CMakeLists.txt,生成动态库文件,可以指定发布目录. 尚不支持: 1.交叉编译环境配置 2.添加依赖库   #在当前目录新建一个build目录,然后cd build ...

  9. html5 canvas 实现简单的画图

    今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...

随机推荐

  1. redis（二）Redis适用场景，如何正确的使用

    网络IO模型 Memcached是多线程,非阻塞IO复用的网络模型,分为监听主线程和worker子线程,监听线程监听网络连接,接受请求后,将连接描述字pipe 传递给worker线程,进行读写IO, ...

  2. 【测试】DG的主切备，备切主

    1.首先要应用日志,保持主备库一致: 备库:SBDB@SYS> recover managed standby database using current logfile disconnect ...

  3. 图的强连通分量-Kosaraju算法

    输入一个有向图,计算每个节点所在强连通分量的编号,输出强连通分量的个数 #include<iostream> #include<cstring> #include<vec ...

  4. css选择器分类

    css选择器大致可以分为10大类: 1.元素选择器 如:p{} 2.类选择器 如:.xx{} 3.ID选择器 如:#xx{} 4.关联选择器 如:p a{} 5.子元素选择器 如:p>a{} 6 ...

  5. 【Linux】Linux字体颜色

    转自:http://onlyzq.blog.51cto.com/1228/546459 echo显示带颜色,需要使用参数-e格式如下:echo -e "\033[字背景颜色;文字颜色m字符串 ...

  6. oracle 强杀进程

    在ORACLE数据库当中,有时候会使用ALTER SYSTEM KILL SESSION 'sid,serial#'杀掉一个会话进程,但是使用这个SQL语句杀掉会话后,数据库并不会立即释放掉相关的资源 ...

  7. javaSE第一天

    第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5)语言    2 (6)人机交 ...

  8. xcode不能连接svn以及不能导入的解决方法

    配置svn的方法不多说,网上一堆.这里要说的是怎么解决连接不上svn以及在xcode中不能修改svn目录的问题.   首先,xcode连接不上linux的svn,一般来说,问题就出在端口上.svn的默 ...

  9. 自制docker basic image

    docker的安装和入门见官网教程:http://docs.docker.com/ 下面是自制docker basic image的步骤,以ubuntu为例. 1. 安装debootstrap apt ...

  10. POJ C程序设计进阶 编程题＃3：运算符判定

    编程题#3:运算符判定 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 两个 ...