相比了下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. 函数变量作用域（python）

    收集参数:该参数个数不确定 >>> def test(*params): print('参数的长度是:', len(params)); print('第二个参数是:', params ...

  2. opencv编程解决warning C4003: “max”宏的实参不足

    忘了把程序出错的代码附上了,运行修改好的程序才发现的.只好把问题的代码大致写一下了: warning C4003: “min”宏的实参不足 error C2589: “(”:“::”右边的非法标记 e ...

  3. Metrics.NET report to Zabbix

    废话不多说,先上git地址 https://github.com/binking338/Metrics.Reporters.ZabbixReporter 实现了Metrics.NET到Zabbix的报 ...

  4. 这些优化 Drupal 网站速度的超简单办法，你忽略了多少？

    “怎么样能让我的 Drupal 网站更快一些?”是我们最常遇到的一个问题.站点速度确实非常重要,因为它会影响你的 SEO排名效果.访客是否停留以及你自己管理网站所需要的时间. 今天我们就来看看那些通过 ...

  5. 关于 LimitedConcurrencyLevelTaskScheduler 的疑惑

    1. LimitedConcurrencyLevelTaskScheduler 介绍 这个TaskScheduler用过的应该都知道,微软开源的一个任务调度器,它的代码很简单, 也很好懂,但是我没有明 ...

  6. 文件系统取证分析（第11章：NTFS概念）

    /* Skogkatt 开始翻译于2015-01-24,仅作为学习研究之用,谢绝转载. 2015-01-31更新MFT entry 属性概念. 2015-02-01翻译完成. 译注:我翻译这本书的这三 ...

  7. Ceph–s ceph 集群状态

    [root@ceph-mon1 ~]# ceph -s cluster 03f3afd4-4cc6-4083-a34c-845446a59cd4 health HEALTH_OK monmap e1: ...

  8. ASP.NET MVC 开源项目学习之ProDinner (一)

    首先在github上面将ProDinner项目通过 Git Bash 克隆到本地,接下来我们开始分析这个项目吧~ 系统采用.Net 4.5, Asp.net Mvc 5,VS2012,Sql serv ...

  9. ios开发错误笔记

    今天的奇葩错误,最后解决方式是删除了手机上面的快捷方式,然后再clean,然后再重启了xcode.无语了,xcode也经常出些奇葩问题,真无语啊. ios技术交流群:378501081..期待你加入. ...

  10. Alfresco安装与配置图解

    Alfresco安装与配置图解 Alfresco是一款开源的企业内容管理系统(ECM),为企业提供了日常的文档管理.工作流(可以和企业目前的OA协同接合使用).工作记录管理.知识管理.网络内容管理.图 ...