<!DOCTYPE html>

<html lang='en'>

<head>

<meta charset='UTF-8'>

<title>Title</title>

</head>

<body>

<canvas id='cas' style="border:1px solid red" width='600' height='400'></canvas>

<div>

<input type="button" value="蓝色" onclick="blue()"/>

<input type="button" value="绿色" onclick="green()"/>

<input type="button" value="粉色" onclick="pink()"/>

<select name="" id="" onchange="change(this)">

    <option value="1">1px</option>

    <option value="4">4px</option>

    <option value="8">8px</option>

    <option value="20">20px</option>

</select>

<input type="button" value="清空画布" onclick="clearCas()">

</div>

<script>

//手写输入!!

var cas = document.getElementById( 'cas' );

    var context = cas.getContext( '2d' );

    var mouseDown = false;//定义一个参数判断鼠标是否按下

    var points = [];//定义一个数组存放鼠标不停移动时的坐标

    // 添加鼠标移动事件

    cas.addEventListener( 'mousemove', function ( e ) {//鼠标移动事件

    // 注册按下与抬起的事件

    cas.addEventListener( 'mousedown',function () {//鼠标按下事件

        mouseDown = true;

    });

    cas.addEventListener( 'mouseup',function () {//鼠标抬起事件

        mouseDown = false;

    });

        if ( mouseDown ) {

            points.push( { x: e.offsetX, y: e.offsetY } );

            // 不断的刷新, 绘制

            context.beginPath();//开启新的绘制

            // 绘图

            context.moveTo( points[ 0 ].x, points[ 0 ].y );//起始位置

            // 循环 lineTo

            for ( var i = 1; i < points.length; i++ ) {

                context.lineTo( points[ i ].x, points[ i ].y );

            }

            context.stroke();//描边

        } else {

            points = [];

        }

    });

    /*选择画笔颜色 */

    function blue(){

        context.strokeStyle="blue";//画笔颜色改为蓝色

    }

    function green(){

        context.strokeStyle="green";

    }

    function pink(){

        context.strokeStyle='pink';

    }

    /*选择画笔粗细*/

    function change(dom){

        context.lineWidth=dom.value-0;

    }

    /*清空画布*/

    function clearCas(){

        context.clearRect(0,0,cas.width,cas.height);

    }

</script>

</body>

</html>

　　

canvas简单画图板的更多相关文章

  1. Html5用Canvas制作画图板

    需求: 绘制多边形 可填充颜色 可设置文字 可移动,可删除 鼠标按住后,抬起之前线段应该尾随鼠标当前位置 可与后台方便的进行数据交互,保存到后台,或将数据从后台取到前台显示对应的图形 思考: 第一想到 ...

  2. （转）第02节：在Canvas上画简单的图形

    我们现在已经可以在HTML中使用Fabric.js库了,那这节我们就详细的学习一下如何在canvas上画出简单的图形. 在画东西之前我们需要了解画任何东西的基本三个步骤: 声明画布(canvas),用 ...

  3. 很值得学习的java 画图板源码

    很值得学习的java 画图板源码下载地址:http://download.csdn.net/source/2371150 package minidrawpad; import java.awt.*; ...

  4. 【示例代码】HTML+JS 画图板源码分享

    一个有趣的画图板, 用了 HTML5中的本地存储.下载.canvas 等技术,这个项目中用到了canvas 的很多基础功能,初学者可以学习一下 . 建议开发童鞋使用统一开发环境UDE来进行查看.调试. ...

  5. Java版简易画图板的实现

    Windows的画图板相信很多人都用过,这次我们就来讲讲Java版本的简易画板的实现. 基本的思路是这样的:画板实现大致分三部分:一是画板界面的实现,二是画板的监听以及画图的实现,三是画板的重绘.(文 ...

  6. 使用JavaScript在Canvas上画出一片星空

    随着Html5的迅猛发展,画布也变得越来越重要.下面我就写一个关于在canvas上画出一片星空的简单的代码的示例. 理论基础 初始化一个canvas,获得一个用于绘制图形的上下文环境context.并 ...

  7. Java编写画图板程序细节-保存已画图形

    没有Java编写画图板程序细节-保存已画图形   一.为何我们要保存画图板上已画图形呢? 有很多人会问,为什么我们一定要保存画图板上已经画好了的图形呢?原因很简单.当我们在画图板上画完自己想画的图形后 ...

  8. wxPython 画图板

    终于开始Python学习之旅了,姑且以一个“画图板”小项目开始吧.放慢脚步,一点一点地学习. 1月28日更新 第一次遇到的麻烦便是“重绘”,查了好多资料,终于重绘成功了. #-*- encoding: ...

  9. Java 从零开始实现一个画图板、以及图像处理功能，代码可复现

    Java 从零开始实现一个画图板.以及图像处理功能,代码可复现 这是一个学习分享博客,带你从零开始实现一个画图板.图像处理的小项目,为了降低阅读难度,本博客将画图板的一步步迭代优化过程展示给读者,篇幅 ...

随机推荐

  1. 学会如何使用,pycharm,和gitlanb

    好好看,好好学.这才是正确的. 1  在pycharm 里面选择checkout as  切换分支 2    选择自己提交的,然后选择审核人.是强哥

  2. VB － 错误处理

    1.最常见的错误是运行时错误,也就是说错误在脚本正在运行的时候发生,是脚本试图进行非法操作的结果.例如零被作为除数.在vbs中,任何运行时错误都是致命的,此时,脚本将停止运行,并在屏幕上显示一个错误消 ...

  3. Linux shell 常用命令大全 每日一更

    大一上学期学习了Linux的基本操作,已经很久没使用了,虚拟机也近半年没开(作为一个计算机类专业的少年真的不应该).为了补回这些知识和为将来的学习打下基础,现在每天更新一条shell命令及其子命令,欢 ...

  4. JNDI+Tomcat配置数据源的两种方式

    非全局jndi配置步骤 :此种配置方式不需要在server.xml中配置数据源,而只在tomcat/conf/Catalina/localhost下的启动配置中配置即可.注意红色字体名称必须和相同. ...

  5. javaScript Queue

    function Queue() { var items = []; this.enqueue = function(element) { items.push(element) } this.deq ...

  6. USACO 2014 US Open Odometer /// 数位DP

    题目大意: 给定区间 l r 求得区间中有多少个数 数的各个数位里出现最多次的数>=数的长度的一半 如2233 3334 枚举k在数中出现次数在一半以上 那么求出的所有方案数中应该减去 两个数各 ...

  7. rope(平衡二叉树）

    题目描述: 链接:https://www.nowcoder.com/acm/contest/141/C来源:牛客网 Eddy likes to play cards game since there ...

  8. 高精度求A*B（FFT）

    A * B Problem Plus 链接:http://acm.hdu.edu.cn/showproblem.php?pid=1402 Time Limit: 2000/1000 MS (Java/ ...

  9. C# goto学习

    如下代码: ; goto b;//goto语句用来控制程序跳转到某个标签的位置 a++; b: Console.WriteLine(a); Console.ReadKey(); 输出结果为:5,执行g ...

  10. 记一些经常用到的linux命令

    记一些经常用到的linux命令,备忘用 用清华源pip: pip install django==1.11  tensorflow==1.4.0 keras==2.0.6 -i https://pyp ...