相比了下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. 翻译：Knockout 轻松上手 - 1 Knockout 是什么？

    原文名称:KnockoutJS Starter Knockout 是一个非常棒的脚本库,可是我发现许多人并不了解它,所以,思胜翻译了这本著作. 这一节,我们将会讨论 Knockout 可以做什么,又如 ...

  2. 删除sqlserver2008日记文件

    use master go alter database dbname set recovery simple with no_wait go alter database dbname set re ...

  3. Java将Unix时间戳转换成指定格式日期

    public String TimeStamp2Date(String timestampString, String formats){     Long timestamp = Long.pars ...

  4. eclipse 弹出智能提示、代码自动换行

    在eclipse 中编写java 程序时,为了快速查找变量或搜索方法调用,在智能窗口的帮助下,程序的编写速度会更快,但eclipse 默认下并不弹出智能窗口,这就需要自己进行配置,设置的步骤如下: 打 ...

  5. 洛谷P1214 [USACO1.4]等差数列 Arithmetic Progressions

    P1214 [USACO1.4]等差数列 Arithmetic Progressions• o 156通过o 463提交• 题目提供者该用户不存在• 标签USACO• 难度普及+/提高 提交 讨论 题 ...

  6. ndk-gdb 对java/native code联合调试(升级版)

    之前写过一篇 关于android native 开发,调试的文章(http://www.cnblogs.com/yaozhongxiao/archive/2012/03/13/2393959.html ...

  7. 【HTML/XML 9】XML中的DTD文件

    导读:DTD是Document type definition(文档类型定义的缩写),是一套关于标记符的语法规则,它是XML文件的验证机制,数以XML文件的组成部分.XML文档是一种描述标记语言的语言 ...

  8. 使用.NET MVC框架项目开发流程（项目开发流程）

    MVC项目开发流程 整理需求,进行需求分析.项目设计. 整理数据项,建数据库做前期准备,并整理字典. 建立所需数据库表和视图和模型. 页面实现其初步功能(跳过逻辑后台代码),只是实现页面之间的跳转以及 ...

  9. Leetcode028. Implement strStr()

    class Solution { public: int strStr(string haystack, string needle) { ; //needle empty ; //haystack ...

  10. DataGridview焦点不移开不保存数据问题

    this.datagridLeft.ClearSelection();                this.datagridLeft.Refresh();                this. ...