WEB前端开发学习----10. canvas实现画板的两个方法

方法1：查看演示 点击鼠标作画

此方法就是鼠标移动的时候不停的画小圆点，然后用等粗的线将小圆点串起来（有点类似于珍珠项链）。因为是小圆点，所以效果要比方法2好，比较平滑。

方法2：查看演示 点击鼠标作画

这个方法很容易理解，就是不断的将鼠标所在的位置用线段连起来。缺点是不够平滑，尤其是粗线条的时候。

方法1：

[html] view plaincopy

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. </head>
  6. <body style="margin:0">
  7. <canvas id="canvas">请更新浏览器版本</canvas>
  8. <script>
  9. var canvas=document.getElementById("canvas");
  10. var cxt=canvas.getContext("2d");
  11. var radius=10;
  12. var falge=false;
  13. //画板大小为屏幕大小
  14. canvas.width=window.innerWidth;
  15. canvas.height=window.innerHeight;
  16. cxt.lineWidth=20;
  17. //添加监听对象
  18. canvas.addEventListener("mousedown", start);
  19. canvas.addEventListener("mouseup", stop);
  20. canvas.addEventListener("mousemove", putPoint);
  21. function putPoint(e){
  22. if(falge){
  23. cxt.lineTo(e.clientX, e.clientY);
  24. cxt.stroke();
  25. cxt.beginPath();
  26. cxt.arc(e.clientX, e.clientY, radius, 0, 360, false);
  27. cxt.fill();
  28. cxt.beginPath();
  29. cxt.moveTo(e.clientX, e.clientY);
  30. }
  31. }
  32. function start(e){
  33. falge=true;
  34. putPoint(e);
  35. }
  36. function stop(){
  37. falge=false;
  38. cxt.beginPath();
  39. }
  40. </script>
  41. </body>
  42. </html>

方法2：

[html] view plaincopy

    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. </head>
    6. <body>
    7. <canvas width="900" height="500" id="canvas" style="border:1px solid black">请更新浏览器版本</canvas>
    8. <script >
    9. var canvas=document.getElementById("canvas");
    10. var cxt=canvas.getContext("2d");
    11. var flag=false
    12. cxt.lineWidth=20;
    13. canvas.onmousedown=function(evt){
    14. //alert(evt.pageX);
    15. //alert(this.offsetLeft);
    16. var startX=evt.clientX-this.offsetLeft;
    17. var startY=evt.clientY-this.offsetTop;
    18. cxt.beginPath();
    19. cxt.moveTo(startX, startY);
    20. flag=true;
    21. }
    22. canvas.onmousemove=function(evt){
    23. if(flag){
    24. var endX=evt.clientX-this.offsetLeft;
    25. var endY=evt.clientY-this.offsetTop;
    26. cxt.lineTo(endX, endY);
    27. cxt.stroke();
    28. }
    29. }
    30. canvas.onmouseup=function(){
    31. flag=false;
    32. }
    33. canvas.onmouseout=function(){
    34. flag=false;
    35. }
    36. </script>
    37. </body>
    38. </html>
时间： 2024-12-05 08:43:29

WEB前端开发学习----10. canvas实现画板的两个方法的相关文章

WEB前端开发学习：源码canvas 雪

WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body style="overflow: hidden;margin:

2018web前端学习路线，详谈web前端开发学习路线

近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常的可观,好前景高薪资吸引了众多的人投入到前端开发的学习当中去,想学好web前端,这份web前端开发学习路线分享给你. 好的学习方法和掌握好正确的学习路线可以让我们的学习达到事半功倍的效果,如果你新手想要学习web前端的话,那么这份前端的学习路线图很适合你.这份学习路线的课程涵盖JavaScript.HTML5.C

web前端开发学习路线图分享，详谈2018web前端开发学习路线

近几年IT业可谓是发展火热,而且新生了很多的职业.例如安卓开发工程师.iOS开发工程师.在这众多的新生职业中备受瞩目的当属web前端工程师了,前端工程师薪资高,就业发展前景好,更多的人选择了这一职业成为自己的发展方向,想要自己成为一名合格的web前端工程师,web前端开发学习路线图值得大家去看看.挺适合大家借鉴来学习的.web前端课程包括了几个方面的内容: 1.学习HTML,这是最简单,最基本的是要掌握div,formtable.Ulli.P.跨度.字体这些标签,这些都是最常用的,尤其是DIV和

Web 前端开发学习之路（入门篇）

字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.＝＝ 以下引用知乎 @李路 的话. 以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列实践,结合

web前端开发学习路线

首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学.多思.多练.多交流.多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整.新手学习前端的话,一定要想想为什么要学习它,是出于一种什么心态,然后定位好自己,多向大牛请教,多教一些没有自己水平高的人,那样往往能让自己成长的快,切勿急躁.初学可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会投资,分析自己的现状及能力,实时调整,一定要有自己的想法,懂得创新.在这里一定要对自己做分析,然后找出一种适合的

web前端开发学习课程大纲路线图及学习方法分享

想学好web前端开发,要学会阅读别人优秀的代码.web前端开发思想并不是统一固定不变的,阅读别人代码的过程就是间接的在向别人学习,这一过程中可以学习别人的开发思路,不同的人思路是不一样的,如果别人写的代码很优秀.很简单.且运行和性能上有很大的优势,就有很多可以借鉴的地方. 以下这份web前端学习路线图适合所以零基础的学员学习,都是从浅入深,没有基础的同学跟着视频教程及课程大纲一步一步的学习是可以很好的掌握的. 那么想要学好html5前端开发,那么需要掌握的专业技术有: 第一阶段:前端页面重构 内

干货教程 | Web前端开发学习入门指南

互联网的高速发展,让企业对于Web前端开发人员的需求越来越大,想要进入这行的人自然也逐渐增多.很多新手在进入这行时都会徘徊.犹豫.疑问,想学习又怕学不好,下面就和Web前端小编一起来看看. 1.HTML的学习 超文本标记语言(HyperTextMark-up Language简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代码,浏览器将HTML代码解释渲染后呈现给用户.因此,我们必须掌握HTML的基本结构和常用标记及属性. HTML的学习是一个记忆和理

web前端开发学习视频教程下载（百G）

1.妙味WEB前端开发全套视频教程 链接: http://pan.baidu.com/s/1bf1Ow2 密码: 2yyu 2.极客学院前端教程(html5 Bootstrap Nodejs) 链接: http://pan.baidu.com/s/1eQFcHoe 密码: iem6 3.前端与移动开发基础视频(h5\css3\html\css) 链接: http://pan.baidu.com/s/1c1wiSQc 密码:2cp4 4.2015前端工程师培训视频教程(html5\UI\JS\JQ

WEB前端开发学习----9. 使用canvas来画个时钟

canvas元素在html5中的重要性非同一般.配合JS让我们实现了在浏览器页面中作画的强大功能.不再单单依靠图片,flash等外部文件,减少http请求,从而网页加载速度更加快捷. 简单的线段: 看个小演示  canvas小房子 不用函数累死人.... 旋转: 使用提供的rotate()方法.需要注意的是,在旋转前,应该重新定位原点.一般来说将要旋转的图像的端点重定向为原点,以此为基础来旋转.也就是说先定位,再设置旋转角度,最后画图.看个演示  canvas 扇子.这样要比一道一道的画线方便许