<!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. 用 Flask 来写个轻博客 (27) — 使用 Flask-Cache 实现网页缓存加速

    目录 目录 前文列表 扩展阅读 Flask-Cache 应用 Flask-Cache 实现视图函数缓存 缓存无参数的普通函数 缓存带参数的普通函数 缓存无动态参数的视图函数 缓存带动态参数的视图函数 ...

  2. 测开之路四十八：Django之重定向与cookie

    基础配置与上一篇一致 404错误 定义一个error页面 <!DOCTYPE html><html lang="en"><head> <m ...

  3. 重新认识Maven

    PS:第一次接触maven大约是两年前吧,隐约记得之前都是人工寻找并下载很多jar,放在项目的lib中(表示太年轻,没有接触过Ant或者其他类似的工具,就不找别人写的比较了).懒人永远有着自己的小聪明 ...

  4. BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)

    原生的 Bootstrap 的 carousel.js 插件并没有支持手势,有下面3种解决方案 : 1. jQuery Mobile (http://jquerymobile.com/download ...

  5. APP测试功能点大全

    APP测试要点 APP测试的时候,建议让开发打好包APK和IPA安装包,测试人员自己安装应用,进行测试.在测试过程中需要注意的测试点如下:   1.安装和卸载   ●应用是否可以在IOS不同系统版本或 ...

  6. docker 实战

    创建镜像 docker pull ubuntu 创建容器 docker run -it -name web ubuntu /bin/bash 更新软件源信息 apt-get update 安装ssh  ...

  7. 在学react时候找不到static/js/bundle.js

    看如图上面bundle.js,我在项目中和配置文件中都没有找到这个JS文件,然后我就觉得很诧异,然后各种查找,终于找到一篇文章,在此记录一下 第一步:npm run start            ...

  8. XMLSpy 生成xml模板(转)

    公司中的生成ci需要和xsd中的sequence一致, 由于xsd的过于庞大,且有继承关系, 所以人工比较是不可能的. 现用xmlspy来生成. 1, 在xmlspy中打开xsd 2, 将choice ...

  9. 46-python基础-python3-字符串-常用字符串方法(四)-join()-split()

    5-字符串方法 join()和 split() 1-join()方法 将字符串列表连接成一个单独的字符串. join()方法在一个字符串上调用,参数是一个字符串列表,返回一个字符串. 请注意,调用 j ...

  10. asciinema.org -Record Your Terminal Share it with no fuss

    紀錄 Terminal 下指令的過程 http://asciinema.org/