用canvas实现一个简易的涂鸦画板

这是一个简单的用H5中的新特性canvas写的画板它实现了选择本机图片绘制在浏览器上,并可以用画笔涂鸦最后可以保存涂鸦.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">canvas{border:1px solid green;}
</style>
</head>
<body>
选择图片：<input id="file" type="file">
<button οnclick="restuya()">重新涂鸦</button>
<button οnclick="saveTu();">保存图片</button>
<hr>
<canvas id="canvas" width="1105" height="500">您的破浏览器不兼容，请升级！
</canvas>
<hr>
<div id="res"></div>
<script type="text/javascript">// 获取 canvas 对象var canvas = document.getElementById('canvas');// 获取绘图环境var ctx = canvas.getContext('2d');var last = null;var file = document.getElementById('file');// 文件对象var filedata = null;// 鼠标按下canvas.onmousedown = function(){// 在鼠标按下后触发鼠标移动事件canvas.onmousemove = move;}// 鼠标抬起取消鼠标移动的事件canvas.onmouseup = function(){canvas.onmousemove = null;   last = null;}// 鼠标移出画布时 移动事件也要取消。canvas.onmouseout = function(){canvas.onmousemove = null;last = null;}// 鼠标移动函数function move(e){// console.log(e.offsetX);if(last != null){ctx.beginPath();ctx.moveTo(last[0],last[1]);ctx.lineTo(e.offsetX,e.offsetY);ctx.stroke();}     // 第一次触发这个函数，只做一件事，把当前 鼠标的 x , y 的位置记录下来// 做下一次 线段的 起始点。last = [e.offsetX,e.offsetY];}// 当文件域内容发生改变时触发函数file.onchange = function(e){filedata = e.target.files[0];  //  实例化文件读取对象drawImg(filedata)}// 重新在画function restuya(){ctx.clearRect(0,0,canvas.width,canvas.height);drawImg(filedata)}// 绘制图片function drawImg(filedata){var readFile = new FileReader();readFile.readAsDataURL(filedata);// 图片读取成功readFile.onload = function(){// 结果// console.log(this.result);// this.result;// 第一种方法var Img = new Image();Img.src = this.result;Img.onload = function(){// 根据 图片的 宽高 来 设置canvas 宽和高 canvas.width = Img.width;canvas.height = Img.height;// console.log(Img.width);// canvas.width = 500;// canvas.width = 500;ctx.drawImage(Img,0,0);}}}// 保存图片function saveTu(){var saveImage = canvas.toDataURL('image/png');   document.getElementById('res').innerHTML = '<img src="'+saveImage+'">';}</script>
</body>
</html>

用canvas实现一个简易的涂鸦画板相关推荐

怎么画图自动生成HTML,用canvas写一个简易画图工具
本文将为您描述用canvas写一个简易画图工具,具体操作方法: Document style="border:1px solid #000000;">您的浏览器不支持canv ...
用canvas画一个简易的机器猫头像
用canvas画一个机器猫的头像,原图如下: 代码实现效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <he ...
用canvas实现一个简易绘图工具
先看效果这里可以选择颜色,从而进行在600px*400px画布中,随便画 ★HTML架构部分  <div><h3>简易绘图工具& ...
iOS：quartz2D绘图小项目(涂鸦画板)
介绍:学了quartz2D的绘图知识后,我根据它的一些功能制作了一个小项目:涂鸦画板. 功能:绘制各种图形,还可以选取相册上的照片做涂鸦,然后保存到相册中.其中,还包括功能有:颜色的选取.线宽的选取. ...
【Android】制作一个简易的画板
前言本文介绍使用Canvas.Paint.Path等原生API,实现一个简易的画板. 绘图原理 Paint Paint可以理解为我们现实中的画笔,在使用前我们需要对Paint进行初始化,比如颜色.画 ...
android 简易涂鸦板,canvas实现的简易涂鸦板效果
用canvas实现的简易涂鸦板效果,用鼠标点击在画布上随意涂鸦涂鸦 *{ margin: 0; padding: 0; } #canvas1{ box-shadow: 0 5px 40px blac ...
使用canvas制作一个移动端画板
概述使用canvas做一个画板,代码里涵盖了一些canvas绘图的基本思想,各种工具的类也可以分别提出来用详细代码下载:http://www.demodashi.com/demo/10503.h ...
使用canvas建立一个可以使用彩笔、橡皮檫的画板
使用canvas建立一个可以使用彩笔.橡皮檫的画板我参加了一个web学习班,因为了解到写博客可以有效提高我的知识掌握水平,所以决定从我学习的内容来入手,废话不多说,开始今天的学习. 首先我们要在&l ...
[Android]自定义绘制一个简易的音频条形图，附上对MP3音频波形数据的采集与展现
在项目中需要到数据统计的地方,往往都需要到一些图的展示,比如曲线图.折线图.饼状图.圆形图.条形图等等.在本文中我们来实现一个简易的条形图的绘制. 首先,我们创建一个BarGraphView类 ...
Android涂鸦画板原理详解——从初级到高级（二）
前言前面写了<Android涂鸦画板原理详解--从初级到高级(一)>,讲了涂鸦原理初级和中级的应用,现在讲解高级应用.如果没有看过前面一篇文章的同学,建议先去看看哈. 准备高级涂鸦涉及 ...

用canvas实现一个简易的涂鸦画板

用canvas实现一个简易的涂鸦画板相关推荐

最新文章

热门文章