相比了下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. CSS长度单位

    罗列了CSS中常用的长度单位及比较 单位 含义 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 rem 相对于根元素字体大小 px 相对于屏幕分辨率而不是视窗大小: ...

  2. 【EF 3】浅谈ADO数据模型生成串（一）：csdl，ssdl，msl分析

    导读:这段经历,真的是难以忘怀.恨得我牙痒痒,就一个字符串拼接,前前后后尽然报了不下30个错.有的错很快就能调出来,有的错调一天.两天,是真的可以的.最终总结了一下,这些错很大一部分原因是对于EF生成 ...

  3. 数学对象Math ceil()、floor()、round()方法

      Math.ceil()   功能:对一个数进行上取整. 语法:Math.ceil(x) 参数: x:一个数值. 返回值:返回大于或等于x,并且与之最接近的整数. 注:如果x是正数,则把小数“入”: ...

  4. zip的打包与解包和包下载

    text文件压缩包解析与下载 //压缩包下载  private StreamedContent newsTemplate; //该方法是对压缩包进行下载     public StreamedCont ...

  5. Solaris从安装光盘安装软件

    系统安装完成后默认没有安装GCC 挂载系统盘后,所安装的软件就在/cdrom/sol-10-811-x86/Solaris_10/Product文件夹下可以查看下关于GCC的软件包 #ls -l | ...

  6. bea weblogic workshop中文乱码

    重装系统后,weblogic 8.1 workshop中的中文字体是乱码. 可通过菜单中的 Tools -> IDE Properties -> Display, 在Window font ...

  7. 第 2章 数组和 ArrayLists

    数组是最通用的数据结构,它出现在几乎所有的编程语言里.在 C#语言中使用数组包括创建 System.Array 类型的数组对象,以及创建针对所有数组的抽象的基类型.Array 类提供了一套方法,这些方 ...

  8. IOS基础——IOS学习路线图（一）

    一.一个月 1.OC语法基础. 2.KVC和KVO 3.IOS UI基础 4.UI表视图与集合视图 5.UIStoryboard和autoLayout 6.Ipad API 二.10天 7.静态页面考 ...

  9. datagridview添加复选框全选和取消

    全选 private void All_selected_Click(object sender, EventArgs e) { ; i < this.DataGridViewProduct.R ...

  10. Silverlight 独立存储（IsolatedStorageFile）

    1.在Web中添加天气服务引用地址 http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl 2.在Web中添加Wcf服务接口I ...