注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

HTML5 Canvas 简单绘图应用  

2011-04-05 11:40:32|  分类: Html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一个简单的HTML5 Canvas绘图应用

如图:

  HTML5 Canvas 简单绘图应用 - zhenghaoju700 - zhenghaoju700 的博客

CODE

<!DOCTYPE HTML>

<html>

<head>

<title>Html5 Canvas arc</title>

<script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>

</head>

<body>

<div>

<div>

Paint_Options&nbsp;&nbsp;

color:<select id="color">

<option value="black">black</option>

<option value="red">red</option>

<option value="blue">blue</option>

<option value="green">green</option>

</select>

style:<select id="join">

<option value="miter">miter</option>

<option value="round">round</option>

<option value="bevel">bevel</option>

</select>

width:<select id="width">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

</select>

</div>

<canvas id="c" height="800" width="1024" style="border:1px solid black;"></canvas>

</div>

<script type="text/javascript">

    var Dom = YAHOO.util.Dom;

    var Event = YAHOO.util.Event;

var c = Dom.get('c');//取得Dom元素

    var context = c.getContext("2d");//拿到Canvas的上下文 目前好像只支持2D渲染

    

var clickX = new Array();

var clickY = new Array();

var clickDrag = new Array();

    var paint = false; 

    

Event.addListener(c,'mousedown',function(e){

var e = e || window.event;

var mouseX = Event.getPageX(e);

var mouseY = Event.getPageY(e);

        

paint = true;

addClick(mouseX,mouseY);

redraw();

});

 

Event.addListener(c,'mousemove',function(e){

var e = e || window.event;

if(paint){

var mouseX = Event.getPageX(e);

var mouseY = Event.getPageY(e);

addClick(mouseX,mouseY,true);

redraw();

}

});

Event.addListener(c,'mouseup',function(e){

paint = false;

});

 

Event.addListener(c,'mouseleave',function(e){

paint = false;

});

 

function addClick(x,y,dragging){

clickX.push(x);

clickY.push(y);

clickDrag.push(dragging);

}

 

function redraw(){

context.strokeStyle = Dom.get("color").value;

context.lineJoin = Dom.get("join").value;

context.lineWidth = Dom.get("width").value;

        

context.save();

 

for(var i=0; i < clickX.length; i++){

context.beginPath();

if(clickDrag[i] && i != 0){

context.moveTo(clickX[i-1], clickY[i-1]);

}else{

context.moveTo(clickX[i]-1, clickY[i]);

}

context.lineTo(clickX[i], clickY[i]);

context.closePath();

context.stroke();

}

}

</script>

 

</body>

</html>

 

下载地址:

 http://download.csdn.net/source/3161048

参考资料:

http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app

http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#dom-context-2d-linecap

  评论这张
 
阅读(420)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017