<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="myCanvas" width="" height=""

    style="border:1px solid #000000;">您的浏览器不支持canvas

</canvas>

<script type="text/javascript">

    var c =document.querySelector('#myCanvas');

    // 标识画布并指明上下文

    var ctx = c.getContext('2d');

    ctx.strokeStyle = '#000';

    ctx.lineWidth = ;

    c.onmousedown = function (ev){

        ctx.beginPath();

        ctx.moveTo(ev.clientX,ev.clientY)

        c.onmousemove = function (ev) {

            ctx.lineTo(ev.clientX,ev.clientY);

            ctx.stroke()

        }

        c.onmouseup = function () {

            c.onmousemove = null;

        }

    }

</script>

</body>

</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. spring的简易实现（一）

    [练习]spring的简易实现(一) 在第一部分我们实现读取xml的配置,然后实例化xml中的bean 首先定义一个xml和相关的class类 <?xml version="1.0&q ...

  2. c++ LeetCode (网易面试题和链表以及树篇) 五道算法例题代码详解（三）

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11209807.html 一.1道网易c++的面试题 我当时第一时间的解答方案 #include ...

  3. Flask 教程 第五章：用户登录

    本文翻译自The Flask Mega-Tutorial Part V: User Logins 这是Flask Mega-Tutorial系列的第五部分,我将告诉你如何创建一个用户登录子系统. 你在 ...

  4. 剑指offer笔记面试题9----用两个栈实现队列

    题目:用两个栈实现一个队列.队列的声明如下,请实现它的两个函数appendTail和deleteHead,分别完成在尾部插入节点和在队列头部删除节点的功能. 测试用例: 往空的队列里添加.删除元素. ...

  5. JS基础语法---编程思想和对象

    编程思想: 把一些生活中做事的经验融入到程序中 面向过程:凡事都要亲力亲为,每件事的具体过程都要知道,注重的是过程 面向对象:根据需求找对象,所有的事都用对象来做,注重的是结果 面向对象特性: 封装, ...

  6. Android Studio 3.0 及以上版本使用技巧总结

    1.更新Android Studio后下载Gradle文件的技巧 更新到3.0版本后,可能会出现创建新项目一直停留在如下图的界面: 选择等待?不知道要等到什么时候,这时候怎么办呢?显然,不能一直等待下 ...

  7. 11gr2 alert日志中报TNS-12535 TNS-00505原因及解决方法

    前面新装了11GR2 RAC,某天在做巡检的时候发现alert日志中存在如下报错Fatal NI connect error 12170. VERSION INFORMATION: TNS for L ...

  8. JVM-3-JVM内存结构

    JVM内存结构可以大致可划分为线程私有区域和共享区域, 线程私有区域由虚拟机栈.本地方法栈.程序计数器组成,而共享区域由堆.元数据空间(方法区)组成.

  9. css3的新属性 新增的颜色--- 透明度---两种渐变---定义多张背景图--background-size

    css31==>颜色的6种表示的方法有6种表示颜色的方法 关键字 rgb rgba(css3) 16进制 hsl hsla hsla h=>是色相,值为360, s=>饱和度,0%- ...

  10. JS运动---运动基础（缓冲运动）

    (1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数 ...