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. ListableBeanFactory

    ListableBeanFactory public interface ListableBeanFactory extends BeanFactory 该接口中定义了可以获取配置中所有bean的信息 ...

  2. MVC系列之一 入门概述

    一 概述 MVC作为一种当前比较好的开发web的框架,不得不提一下了,和WebForm比较来看,有了很大的进步和改进. 先进行一个简单的比较,两个都是Web开发框架,理念仍然是较快速开发. 不过MVC ...

  3. jQuery模拟鼠标点击事件失效的问题

    最近使用jQuery操作浏览器获取数据,需要对分页的信息进行处理,发现直接使用$('div#pager a.next').click();的这种写法无法触发点击事件. 使用trigger('click ...

  4. js 定位到某个锚点

    js 定位到某个锚点 html页面内可以设置锚点,锚点定义 <a name="firstAnchor">&nsbp;</a> 锚点使用 <a  ...

  5. Task<TResult>的使用

    https://msdn.microsoft.com/en-us/library/dd321424(v=vs.110).aspx Represents an asynchronous operatio ...

  6. 各种操作中心Operation Center一览

    Operation Center在中国可能有很多种名称,例如指挥中心.运维室.总控中心等等,国外可能也有很多名称,不管名称如何,任何一个上规模得数据总心或者运维单位一般都有一个这样得中心,来负责所管理 ...

  7. linux bash shell 流程控制（if/else ）

    本文转自:http://blog.csdn.net/flowingflying/article/details/5069646 本文也即<Learning the bash Shell>3 ...

  8. ServiceStack.OrmLite 6 学习笔记 查

    查 根据id var result = db.SingleById<Poco>(1); 根据字段 var customer = db.Single<Customer>(new ...

  9. 2016.3.22考试（HNOI难度）

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

  10. STORM_0001_用vmware拷贝出三个相同的ubuntu搭建小的zookeeper集群

    第一次配置zookeeper的集群 因为想运行storm必须搭建集群在自己的电脑上拷贝了自己的ubuntu虚拟机采用的是vmware给虚拟机分配的地址三个机器的配置基本上一样除了myid这个文件看了这 ...