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#获取CPUID(MD5输出),网卡ID，主DNS，备用DNS

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  2. 样式表中的 element.style样式如何修改

    我们在写前面 web样式的时候,会发现有些时候,我们怎么修改 style里面的值,页面上的样式都不会修改,当你用工具查看时,会发现里面会有 element.style的值,这个值还找不到是在哪里出现的 ...

  3. FreeSWITCH 1.6关于视频通话的一些测试

    简单的测试了一下,暂时没把精力放到这一块. ① 视频编码透传的设置(使用代理模式). 修改internal.xml文件的以下参数: <param name="inbound-proxy ...

  4. ggplot2 legend图例的修改

    ggplot2中的legend包括四个部分: legend.tittle, legend.text, legend.key, legend.backgroud.针对每一部分有四种处理方式: eleme ...

  5. Servlet异常及其生命周期

    Servlet 异常 在javax.servlet包中定义了两个异常类 ServletException类 ServletException类定义了一个通用的异常,可以被init().service( ...

  6. shell应用——主控脚本实现（1）

    shell脚本作用:内网ip,公网ip :cpu负载,内存使用量:ngix和mysql...

  7. servlet&jsp高级：第二部分

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

  8. ServiceStack.OrmLite 学习笔记3 建表

    创建表 前一篇忘记写创建表了,这里补上.(其实前一篇也有那么一点) 建议安装源码里的t4模板看看效果先. public 的属性才有效 在表被创建或者删除的时候执行sql语句 [PostCreateTa ...

  9. 复制选中的listbox内容

    private void lt_log_MouseClick(object sender, MouseEventArgs e) { Clipboard.SetDataObject(lt_log.Sel ...

  10. hdu 1023 卡特兰数+高精度

    Train Problem II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...