相比了下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. awk 解析maps文件中的地址

    maps文件一般是这个样子: pi@raspberrypi:~ $ sudo cat /proc//maps 54b88000-54c8d000 r-xp b3: /lib/systemd/syste ...

  2. Cesium简介

    一.Cesium介绍 Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎.Cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区域,并提供良好的触摸支持 ...

  3. Centos7 install Openstack - (第四节)添加计算服务(Nova)

    Centos7 install Openstack - (第四节)添加计算服务(Nova) 我的blog地址:http://www.cnblogs.com/caoguo 该文根据openstack官方 ...

  4. iOS调试 LLDB

      LLDB是个开源的内置于XCode的具有REPL(read-eval-print-loop)特征的Debugger,其可以安装C++或者Python插件.   常用调试命令:   1.print命 ...

  5. EF CRUD 操作

    1.Add 操作 public bool Add(EFDataModels.User model) { try { int result=0; using (DBEntities db = new D ...

  6. 关于java.lang.IllegalStateException

    今天调试程序时遇到了java.lang.IllegalStateException org.apache.catalina.connector.ResponseFacade.sendRedirect( ...

  7. 学习练习 Oracle数据库小题

    Course(课程表) Score(成绩表) Teacher(教师表)

  8. 洛谷P2732 商店购物 Shopping Offers

    P2732 商店购物 Shopping Offers 23通过 41提交 题目提供者该用户不存在 标签USACO 难度提高+/省选- 提交  讨论  题解 最新讨论 暂时没有讨论 题目背景 在商店中, ...

  9. TCP/IP详解学习笔记（12）-- TCP：传输控制协议

    1.概述      TCP提供了一种可靠的面向连接的字节流运输层服务.      TCP将用户数据打包成报文段,它发送后启动一个定时器,另一端收到的数据进行确认,对失序的数据重新排序,丢弃重复数据,T ...

  10. devexpress中应用于girdviw中HtmlDataCellPrepared事件与CellEditorInitialize事件的区别

    HtmlDataCellPrepared 事件为页面展示的时候对页面做的初始化(将id变为name) ​CellEditorInitialize 事件为页面在编辑时(新增.修改)时做的初始化,如将值填 ...