1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <canvas id="myCanvas" width="" height=""
  9.     style="border:1px solid #000000;">您的浏览器不支持canvas
  10. </canvas>
  11. <script type="text/javascript">
  12.     var c =document.querySelector('#myCanvas');
  13.     // 标识画布并指明上下文
  14.     var ctx = c.getContext('2d');
  15.  
  16.     ctx.strokeStyle = '#000';
  17.     ctx.lineWidth = ;
  18.     c.onmousedown = function (ev){
  19.         ctx.beginPath();
  20.         ctx.moveTo(ev.clientX,ev.clientY)
  21.         c.onmousemove = function (ev) {
  22.             ctx.lineTo(ev.clientX,ev.clientY);
  23.             ctx.stroke()
  24.         }
  25.         c.onmouseup = function () {
  26.             c.onmousemove = null;
  27.         }
  28.     }
  29. </script>
  30.  
  31. </body>
  32. </html>

用canvas写一个简易画图工具的更多相关文章

  1. Qt写一个截屏工具（窗口透明）

    最近发现好多次打开QQ仅仅想用它来截屏 ⊙﹏⊙b汗 不如自己来写一个截屏工具,集成到自己的小工具箱里面 动手之前考虑一下要怎么实现,我考虑过的方案大概有下面两种  : 1. 监控全局鼠标事件 (真是“ ...

  2. 用 nodejs 写一个命令行工具 ：创建 react 组件的命令行工具

    用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具 前言 上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行工具来生成一个组件.对呀,平时工作时,想要创建 ...

  3. Summer——从头开始写一个简易的Spring框架

    Summer--从头开始写一个简易的Spring框架                ​ 参考Spring框架实现一个简易类似的Java框架.计划陆续实现IOC.AOP.以及数据访问模块和事务控制模块. ...

  4. 用Canvas制作简单的画图工具

    今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...

  5. html5入门：教你用canvas写一个时钟

    今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...

  6. 动手写一个Remoting接口测试工具（附源码下载）

    基于.NET开发分布式系统,经常用到Remoting技术.在测试驱动开发流行的今天,如果针对分布式系统中的每个Remoting接口的每个方法都要写详细的测试脚本,无疑非常浪费时间.所以,我想写一个能自 ...

  7. 用Canvas写一个简单的游戏--别踩白块儿

    第一次写博客也不知怎么写,反正就按照我自己的想法来吧!怎么说呢?还是不要扯那些多余的话了,直接上正题吧! 第一次用canvas写游戏,所以挑个简单实现点的来干:别踩白块儿,其他那些怎么操作的那些就不用 ...

  8. 我想写一个前端开发工具（三）:优化！从vue-cli学了几招

    我从过年开始写自己的前端工具 coodev,目前已经写出一个基本的架子,大多数预想的功能都能跑通,还剩一些需要解决的问题也都已经列出来了.本来这一周打算解决对不同后端模板的前后端渲染支持的问题.但是看 ...

  9. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

随机推荐

  1. [转]Introduction - Run Excel Macro using VBScript

    本文转自:https://wellsr.com/vba/2015/excel/run-macro-without-opening-excel-using-vbscript/ Have you ever ...

  2. GIT命令行统计代码提交行数

    项目中遇到写报告的时候要反馈某个人或者某个功能的代码量,又没有集成CI这些插件,可以简单的用GIT命令统计下代码提交量: --统计某个人的提交代码 git log --author="old ...

  3. ORA-39901 EXPDP分区报错/分区表删除不完全

    [oracle@localhost zgy]$ expdp orders/orders directory=DUMPDIR DUMPFILE=test_exp.dmp TRANSPORT_TABLES ...

  4. DNS服务搭建（正反向解析）

    版权声明:本文为博主原创文章,支持原创,转载请附上原文出处链接和本声明. 本文地址链接:https://www.cnblogs.com/wannengachao/p/11954625.html 1.安 ...

  5. MATLAB最大均值差异(Maximum Mean Discrepancy)

    MATLAB最大均值差异(Maximum Mean Discrepancy) 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 更多内容,请看标签:MAT ...

  6. Deepin 15.9系统直接运行exe运行程序

    以下为你介绍在深度Deepin 15.9 Linux操作系统下直接运行exe文件的方法,此方法基于deepin-wine实现,经测试,一些exe文件是可以正常打开的,但部分可能会出现无法使用的情况,但 ...

  7. POJ 2386 Lake Counting 题解《挑战程序设计竞赛》

    地址 http://poj.org/problem?id=2386 <挑战程序设计竞赛>习题 题目描述Description Due to recent rains, water has ...

  8. super()方法详解

    目录 一.单独调用父类的方法 二.super() 方法基本概念 2.1 描述 2.2 语法 2.3 单继承使用super() 2.4 多继承使用super() 三.注意事项 四.练习 一.单独调用父类 ...

  9. Python 爬虫介绍，什么是爬虫，如何学习爬虫？

    ​ 作为程序员,相信大家对“爬虫”这个词并不陌生,身边常常会有人提这个词,在不了解它的人眼中,会觉得这个技术很高端很神秘.不用着急,我们的爬虫系列就是带你去揭开它的神秘面纱,探寻它真实的面目. 爬虫是 ...

  10. 1+x证书Web前端开发HTML+CSS专项练习测试题（八）

    1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 1+x 证书 Web 前端开发 HTML+CSS 专项练习测试题(八) http://blog.zh66.club/index ...