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. C++ 去掉字符串首尾的 \x20 \r \n 字符

    转载:http://www.sharejs.com/codes/cpp/5780 /* 去掉字符串首尾的 \x20 \r \n 字符 by sincoder */ void clean_string( ...

  2. POJ 3061 Subsequence 尺取法

    转自博客:http://blog.chinaunix.net/uid-24922718-id-4848418.html 尺取法就是两个指针表示区间[l,r]的开始与结束 然后根据题目来将端点移动,是一 ...

  3. raid0,raid1,raid10,raid5,raid50,raid6,raid60的功能总结简述

    1,raid0的特性:采用剥离,数据将在几个磁盘上进行分割.数据被分成很多数据块,每一数据块会被写入不同的磁盘.从而, 每一磁盘的工作负荷都得到了降低,这有助于加速数据传输.RAID-0可让磁盘更好地 ...

  4. 简单封装JDBC

    package com.sunshine.frimework.tool;import java.sql.Connection;import java.sql.DriverManager;import ...

  5. Shared Preferences 数据存储

    SharedPreferences类,它是一个轻量级的存储类,特别适合用于保存软件配置参数. 其背后是用xml文件存放数据,文件存放在/data/data/<package name>/s ...

  6. Reading Csv Files with Text_io in Oracle D2k Forms

    Below is the example to read and import comma delimited csv file in oracle forms with D2k_Delimited_ ...

  7. CALayer总结（三）

    CPU VS GPU 动画和屏幕上组合的图层实际上被一个单独的进程管理,而不是你的应用程序.这个进程就是所谓的渲染服务.在iOS5和之前的版本是SpringBoard进程(同时管理着iOS的主屏).在 ...

  8. 用iconv指令解决utf8和gb18030编码间转换

    Linux显示在Windows编辑过的中文就会显示乱码是由于两个操作系统使用的编码不同所致.Linux下使用的编码是utf8,而Windows使用的是gb18030.  解决方案:  在终端中,进入到 ...

  9. Python语言精要---上

    下面的记录根据: 麦金尼. 利用Python进行数据分析[M]. 机械工业出版社, 2014. 这本教材的附录部分总结而来   Python的设计特点是重视可读性,简洁性以及明确性 Python不推荐 ...

  10. HDU1016 Prime Ring Problem（DFS回溯）

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...