<!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. 使用 Gradle 快速创建 Java 项目

    上一篇介绍了如何安装 Gradle,现在就可以直接通过已经安装好的 Gradle 创建一个普通 Java 项目 Gradle 默认内建了一个 init 插件,可以生成 Java 项目基础结构 $ gr ...

  2. python接口自动化测试三十六：数据驱动参数化之paramunittest

    官方文档1.官方文档地址:https://pypi.python.org/pypi/ParamUnittest/2.github源码下载地址:https://github.com/rik0/Param ...

  3. 测开之路三十四：html常用标签

    网页的结构: HTML:超文本标记语言是迄今为止网络上应用最为广泛的语言,也是构成网页文档的主要语言.HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字.图形.动画.声音.表格.链 ...

  4. appium常见问题03_appium脚本报错selenium.common.exceptions.WebDriverException

    运行appium脚本时报错selenium.common.exceptions.WebDriverException...,如下截图: 该报错说明appium和app的内置chrome版本不一致 [解 ...

  5. Linux操作系统(二)_快速入门

    环境 安装VM ware,输入VM key 在VM上安装CentOS 6.5 设置网络,能在本机上ping通 通过终端连接工具:Xshell或SecureCRT,连接Linux服务器 实操可能出现的问 ...

  6. Gentoo 搭遗

    安装 app-portage/gentoolkit 使用如下方式,可查询某个被包安装的文件列表,可以筛选文件类型 equey files [--filter=doc] <包名称> emer ...

  7. ASP.NET MVC4获取当前系统时间

    <p>当前时间是:@ViewBag.CurrentDate.ToLongDateString()</p>

  8. vue中使用videojs打包后体积过大优化

    videojs 是一个非常好的js库,可以支持各种格式的视频播放,也能做直播流.官网地址 https://videojs.com/ 在vue项目中也可以使用 vue-video-player ,更好的 ...

  9. 【笔记目录2】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总

    当前标签: ASP.NET Core快速入门 共2页: 上一页 1 2  任务27:Middleware管道介绍 GASA 2019-02-12 20:07 阅读:15 评论:0 任务26:dotne ...

  10. VMware Converter Standalone迁移概要

    VMware Converter 迁移工具使用:1.基本概念 1.1基本组件: converter standalone server:包含server和worker两个服务,这两个服务经常一起安装 ...