html代码:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         #myCanvas {

             background: #abcdef;

         }

     </style>

 </head>

 <body>

 <canvas id="myCanvas" width="550px" height="400px"></canvas>

 <script src="main.js"></script>

 </body>

 </html>

js代码：

 (function () {

     var c = document.getElementById("myCanvas");

     var con = c.getContext("2d");

     c.onmousedown = function (e) {

         c.onmousemove = function (e) {

             con.beginPath();

             con.arc(e.pageX, e.pageY, 5, 0, 2 * Math.PI);

             con.fillStyle = "white";

             con.fill();

             con.closePath();

         };

         c.onmouseup = function (e) {

             c.onmousemove = "";

         }

     }

 })();

canvas实现绘画的更多相关文章

  1. Canvas基本绘画学习

    学好Canvas,从简单开始.下面是一些Canvas入门最基本的实例分享: <!DOCTYPE html> <html> <head lang="en" ...

  2. Android Canvas设置绘画时重叠部分的处理模式【含效果图】

    在Android的PorterDuff.Mode类中列举了他们制定的规则: android.graphics.PorterDuff.Mode.SRC:只绘制源图像 android.graphics.P ...

  3. html5的canvas绘制迷宫地图

    canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...

  4. canvas游戏小试：画一个按方向键移动的圆点

    canvas游戏小试:画一个按方向键移动的圆点   自己对canvas,但又有一颗做游戏的心TT.然后记录一下对canvas的学习吧,用一个按方向键控制的小圆点来做练习.(编程时用了一些es6的语法) ...

  5. 车大棒浅谈for循环+canvas实现黑客帝国矩形阵

    背景: 一日在网上闲逛的之时,突然看到一个利用JQ插件实现canvas实现的电影黑客帝国的小Demo.觉得创意不错,就下载下来研究一下. 网上浏览jQuery的写法 $(document).ready ...

  6. js canvas获取图片base64 dataUrl

    function getImgBase64(path, callback) { var img = new Image(); img.src = path; //图片加载完成后触发 img.onloa ...

  7. javascript canvas画订单

    前段时间看了某个平台的后台,发现订单显示使用的canvas进行绘画(插件echarts),直观,明了的表达出了订单的走势如下 所以自己心痒痒的,就自己模仿了一个-->贴上代码 <style ...

  8. 理解Canvas原理

    Canvas原理 Canvas我们把它翻译成画布,从字面意思我们就可以知道,不就是可以在上面画东西的布吗.好像很简单,没什么好说的.先看图: 从这几幅图我们可以看到以下几点: 1.每个小方格我们可以看 ...

  9. HackSeven Canvas上的动画

    当自定义View的时候,可以利用Canvas给View添加一些动画效果. 下面的例子,是在屏幕上绘制一个红色的小方块,这个小方块会在屏幕上面“乱跳”. 知识点 使用到的知识点: (1) 在View的子 ...

随机推荐

  1. Java发送邮件，所遇到的常见需求

    明天要做关于发送邮件的接口,虽然我之前已用Java Mail做过许多关于邮件的发送.但同事说有点难点,虽我还不知难点在哪,还是要复习下.凡事预则立,不预则废嘛~ 所需的包: Java Mail : 目 ...

  2. Page_Load 事件

    Page_Load 事件是众多 ASP.NET 可理解的事件之一.Page_Load 事件会在页面加载时被触发,然后 ASP.NET 会自动调用子例程 Page_Load<%@ Page Lan ...

  3. BZOJ 3241: [Noi2013]书法家

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3241 题意: 思路:把每个字母分成三部分,两个字母之间还有空的列,所以我一共设了11个状态 ...

  4. sql 增加字段

    ALTER TABLE [dt_article_goods] ADD [goods_id] int DEFAULT 0

  5. FZU 2147 A-B Game

    A-B Game Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Sta ...

  6. [转]ZigBee On Windows Mobile--ZigBee模块天线设计

    原文出处:http://www.cnblogs.com/dearsj001/archive/2008/10/26/1320029.html

  7. [C和指针]第五部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. So easy Webservice 1.Socket建设web服务

    socket 是用来进行网络通讯的,简单来说,远程机器和本地机器各建一个socket,然后通过该socket进行连接通讯 socket简单模型图: socket的原理图: 代码实现: 1.创建sock ...

  9. Using SSH on Linux

    This document covers the SSH client on the Linux Operating System and other OSes that use OpenSSH. W ...

  10. 2016.3.22考试（HNOI难度）

    T1 盾盾的打字机 盾盾有一个非常有意思的打字机,现在盾哥要用这台打字机来打出一段文章. 由于有了上次的经验,盾盾预先准备好了一段模板A存在了内存中,并以此为基础来打出文章B.盾盾每次操作可以将内存中 ...