<!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. Chrome-谷歌页面翻译增强插件开发

    最近想做一个 Chrome 的插件(看别的博客说其实叫插件不准确,应该叫拓展,大家叫习惯了就按习惯的来吧).一开始咱先直接看了[Chrome 开发(360 翻译)](http://open.chrom ...

  2. 慕课-tooltip提示框总结

    在慕课上学Waynej老师的tooltip浮动提示框,老师每次讲课都会强调搬砖的流程,这点在上了老师的几节课后宝宝终于体会到了: 分析→设计→编码→优化 分析:分析该功能到底是怎样的,其实就是需求分析 ...

  3. Mac定时执行脚本_服务launchctl

    Mac 设置自动执行定时任务, 步骤: 1. 编写plist 2.将plist放入该目录下 ~/Library/LaunchAgents 3.命令启动 添加: launchctl load /Syst ...

  4. spring boot 尚桂谷学习笔记06 异常处理 ---Web

    ------错误处理机制------ 默认效果 1 返回一个默认的错误页面 浏览器发送请求的请求头:优先接收 text/html 数据 客户端则默认响应json数据 : accept 没有说明返回什么 ...

  5. 记录一次kibana启动Unable to fetch data from reporting collector

    版本不匹配导致 应该es与kibana版本一致 本文链接:https://blog.csdn.net/qq_33293753/article/details/87894882

  6. 38.Subsets（子集和）

    Level:   Medium 题目描述: Given a set of distinct integers, nums, return all possible subsets (the power ...

  7. Java Web servlet中的cookie

    点击submit后: 点击查看Cookies: 在C:\Documents and Settings\Administrator\Cookies目录下面会有一个     hongten@webproj ...

  8. linux的CentOS、Ubuntu、Debian三个比较异同

    Linux有非常多的发行版本,从性质上划分,大体分为由商业公司维护的商业版本与由开源社区维护的免费发行版本.商业版本以Redhat为代表,开源社区版本则以debian为代表.这些版本各有不同的特点,在 ...

  9. JS 富文本编码、解码

    第一种 escape()和unescape()方法 escape() 方法能够把 ASCII之外的所有字符转换为 %xx 或 %uxxxx(x表示十六进制的数字)的转义序列.从 \u000 到 \u0 ...

  10. size - 列出段节大小和总共大小

    总览 (SYNOPSIS) size [-A|-B|--format=compatibility] [--help] [-d|-o|-x|--radix=number] [--target=bfdna ...