<!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基础之请求与相应

    from flask import requestrequest.pathrequest.methodrequest.formrequest.argsrequest.values 一般用form获取p ...

  2. Cocos2d-x之Log输出机制

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 在cocos2d-x中,我们使用log这个函数进行输出,log可以输出很多参数,它的使用方式就和使用c语言中的printf的使用方式差不多 ...

  3. 洛谷 P1462 通往奥格瑞玛的道路——二分+spfa

    上一波链接 https://www.luogu.org/problem/P1462 这道题我们考虑二分答案 然后每次跑一次spfa判断是否能够到达n点 tips:在不考虑负权边的前提下我们写最短路最好 ...

  4. nmon使用及监控数据分析

    https://blog.csdn.net/sean4m/article/details/79892387

  5. 使用systemctl管理服务

    系统服务,开机不需要登录就能运行的程序(相当于开机自启)/usr/lib/systemd/system 用户服务,需要登录后才能运行的程序/usr/lib/systemd/user 目录下又存在两种类 ...

  6. javaIO流(五)--对象序列化

    一.序列化概念 几乎只要是我们的java开发,就一定会存在有序列化的概念,而正是有序列化的概念逐步发展,慢慢也有了更多的系列化的标准.--所谓的对象序列化指的是将内存中保存的对象,以二进制数据流的形式 ...

  7. python基础----斐波那契数列

    python实现斐波那契数列的三种方法 """ 斐波那契数列 0,1,1,2,3,5,8,13,21,... """ # 方法一:while ...

  8. Unrecognized SSL message, plaintext connection--SSLSocket 代理服务器连接

    虽然java代码  URL.openconnect(proxy);已经实现了https客户端通过代理连接服务器 但个人在使用socket https代理http://www.cnblogs.com/h ...

  9. elasticsearch 嵌套对象之嵌套类型

    nested类型是一种特殊的对象object数据类型(specialised version of the object datatype ),允许对象数组彼此独立地进行索引和查询. 1. 对象数组如 ...

  10. dotNET面试（二）

    值类型与引用类型 1.值类型和引用类型的区别? 值类型包括简单类型.结构体类型和枚举类型,引用类型包括自定义类.数组.接口.委托等. 赋值方式:将一个值类型变量赋给另一个值类型变量时,将复制包含的值. ...