HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 实例代码 查看内容

使用html5的canvas写一个简单的画板程序

2012-1-11 14:17| 发布者: admin| 查看: 12681| 评论: 2|原作者: yanny

摘要: 最近看了一下html5的一些知识,觉得html5真是一个挺好玩的东西。其中的canvas标签,我非常的感兴趣.因为之前我是个flash的拥趸。也写了许多的actionscript的程序,对于以前只能用as实现的效果.html5也能够做的很不错了 ...
最近看了一下html5的一些知识,觉得html5真是一个挺好玩的东西。其中的canvas标签,我非常的感兴趣.因为之前我是个flash的拥趸。也写了许多的actionscript的程序,对于以前只能用as实现的效果.html5也能够做的很不错了,今天用html5写了一个小小的画图程序。想想一年前的那时候用actionscriot 2.0写出一个画板程序都是那么的的高兴。现在就用html5重温当时那种快乐吧。

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  5. <title>画线例子</title>

  6. <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>

  7. <script type="text/javascript">

  8.         window.onload = function()

  9.         {

  10.                 if(document.getElementById('c'))

  11.                 {

  12.                          var isDown = false;//判断是否按下

  13.                          var ctx = $('#c').get(0).getContext('2d');//取得画布

  14.                          ctx.strokeStyle = 'black';//线条颜色

  15.                          ctx.beginPath();//开始画线

  16.                          $('body')

  17.                          .mousedown(function(e){

  18.                                 isDown = true;

  19.                                 ctx.moveTo(e.clientX-10,e.clientY-10);//画笔拿起放到哪一点

  20.                          })

  21.                          .mousemove(function(e){

  22.                                 !isDown||ctx.lineTo(e.clientX-10, e.clientY-10, 5, 5); //画笔画到哪一点

  23.                                  ctx.stroke();//画线函数

  24.                          })

  25.                          .mouseup(function(){

  26.                                 isDown = false;

  27.                          });

  28.                 }else{alert('ss');}

  29.         }

  30. </script>

  31. <style type="text/css">

  32.         #c{ border:1px solid black;}

  33. </style>

  34. </head>

  35. <body>

  36. <canvas id="c" width="900" height="600">

  37.         你的浏览器不支持canvas标签,请使用firefox和chrome浏览器

  38. </canvas>

  39. </body>

  40. </html>
复制代码


这里讲一下思路,其实这里的逻辑相当的简单,鼠标按下的时候,获得按下时候的坐标ctx.moveTo(e.clientX-10,e.clientY-10)然后鼠标移动的时候就不断的画线,!isDown||ctx.lineTo(e.clientX-10, e.clientY-10, 5, 5)鼠标放开的时候,自然就要吧isDown设置为false了。
然后就总结一下画线的关键步骤好了。
第一步是取得画布。
第二步是开始画线。beginPath()
第三步是移动线条moveTo(),lineTo()。
第四步就是画线stroke()。

查看这个简易画板的效果,请
点击这里

转自互联网。

更多
5

鲜花
1

握手

雷人
1

路过

鸡蛋

刚表态过的朋友 (7 人)

相关阅读

发表评论

最新评论

引用 junoppa 2012-2-27 10:41
还是比较简单的!!!呵呵
引用 海滨 2012-4-4 08:28
$('body')
.mousedown(function(e){}  这里为什么用$('body') ,不用ctx  .
ctx不是画片吗?  我知道$('#c')也可以

查看全部评论(2)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-5-27 16:35

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部