javascript+Canvas实现画板功能
本文实例为大家分享了Canvas实现画板功能的具体代码,供大家参考,具体内容如下
CSS样式代码
body, html { text-align: center; padding-top: 20px; /*margin: 0;*/ } canvas { box-shadow: 0 0 10px #333; margin: 0 auto; /*position: absolute; left: 0; border: 1px solid red;*/ }
这是主体代码
<body onload="draw()"> <canvas id="canvas" width="800" height="600"> </canvas> <script> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext('2d'); //涂鸦 //添加鼠标按下事件 canvas.onmousedown=function(e){ var ev=e||window.event;//兼容性 var x=ev.clientX-canvas.offsetLeft; var y=ev.clientY-canvas.offsetTop; ctx.strokeStyle='red'; ctx.lineWidth=10; ctx.beginPath(); ctx.moveTo(x,y); //onmousemove canvas.onmousemove=function(e){ var ev=e||window.event;//兼容性 var x=ev.clientX - canvas.offsetLeft; var y=ev.clientY - canvas.offsetTop; ctx.lineTo(x,y); ctx.stroke(); } canvas.onmouseup=function(){ canvas.onmousemove="";//当鼠标不点击时则不会画画 } } } } </script> </body>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
javascript实现画板功能
本文实例为大家分享了javascript实现画板功能的具体代码,供大家参考,具体内容如下 画板功能的实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } b
-
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
本文实例讲述了JS基于ocanvas插件实现的简单画板效果.分享给大家供大家参考,具体如下: 使用ocanvas做了个简单的在线画板. ocanvas参考:http://ocanvas.org/ 效果如下: 主要代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>oCanvas Example</title> <meta na
-
用javascript实现画板的代码
在控制台中输入 db.drawCircle([50,50],20,"black"); db.drawLine([5,5],[36,44],"red"); 可以看到效果 复制代码 代码如下: <body style="margin:0px;"> </body> <script> function DrawingBoard(width,height,size) {
-
Javascript HTML5 Canvas实现的一个画板
本文实例为大家分享了HTML5 Canvas实现的一个画板代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DEMO6:自定义画板</title> </head> <body> <canvas id="canvas" width="600" he
-
JS实现canvas简单小画板功能
本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下 Html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
html5+javascript制作简易画板附图
见图: 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <meta http-equiv="content-type" Content="text/html;charset=utf-8"> <head> <title>简易画板</title> <style> #eraseImg{ /*橡皮样式*//**/ border:solid; color:gra
-
javascript简易画板开发
本文实例为大家分享了制作javascript简易画板的方法,供大家参考,具体内容如下 html: <body id="bodys"> <span id="eraser"> 清除所有 </span> <span id="colorbtn"> 笔画颜色 </span> <input type="range" name="ram" id="
-
纯js网页画板(Graphics)类简介及实现代码
今天需要在网页上画一个图谱,想到用JS,经过学习,和网上搜索,经过整理优化得到下面代码,注意不是用HTML5的canvas,而是用的纯js 复制代码 代码如下: /* 以下画点,画线,画圆的方法,都不是用HTML5的canvas,而是用的纯js 用到了一些数学的三角函数方法 以下代码是课堂随机写出,没有做更多优化 */ /* 面向对象封装,添加绘制矩形 进一步优化代码 */ var Graphics = function(divId, color){ this.divId = divId; th
-
javascript+Canvas实现画板功能
本文实例为大家分享了Canvas实现画板功能的具体代码,供大家参考,具体内容如下 CSS样式代码 body, html { text-align: center; padding-top: 20px; /*margin: 0;*/ } canvas { box-shadow: 0 0 10px #333; margin: 0 auto; /*position: absolute; left: 0; border: 1px solid red;*/ } 这是主体代码 <body onload=&quo
-
js+canvas实现画板功能
本文实例为大家分享了js+canvas实现画板功能的具体代码,供大家参考,具体内容如下 1.实现了画图,改变画笔粗细,改变画笔颜色,清屏功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>画板</title> <link rel="shortcut icon" type="image/x-icon&qu
-
javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas绘制时钟</title> <style> div{text-align:cent
-
JS canvas实现画板和签字板功能
本文实例为大家分享了JS canvas实现画板/签字板功能的具体代码,供大家参考,具体内容如下 前言 常见的电子教室里的电子黑板. 本文特点: 原生JS 封装好的模块 最简代码样例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&
-
canvas轨迹回放功能实现
本文通过json机构,HTML代码以及JS代码详细给大家分析了canvas轨迹回放功能实现的过程,以下是全部内容. json结构 [ { "path": [ { "x": 82, "y": 43 }, { "x": 83, "y": 43 }, { "x": 84, "y": 45 }, { "x": 86, "y": 47 }
-
Android编程实现画板功能的方法总结【附源码下载】
本文实例讲述了Android编程实现画板功能的方法.分享给大家供大家参考,具体如下: Android实现画板主要有2种方式,一种是用自定义View实现,另一种是通过Canvas类实现.当然自定义View内部也是用的Canvas.第一种方式的思路是,创建一个自定义View(推荐SurfaceView),在自定义View里通过Path对象记录手指滑动的路径调用lineTo()绘制:第二种方式的思路是,先用Canvas绘制一张空的Bitmap,通过ImageView的setImageBitmap()方
-
JavaScript实现异步图像上传功能
当向服务器上传图像时,根据服务器操作的复杂性和服务器性能,需要几秒钟到几分钟的时间来完成.本文的重点是在图像上传至服务器时使用JavaScript立即显示图像. 介绍 当使用JavaScript将图像上传到服务器时,根据服务器操作的复杂性,可能需要几秒到几分钟来完成操作.在某些情况下,即使图像上传成功,也需要花费更多的时间,这取决于服务器对图像进行额外处理的能力. 本文展示了一种使用代码示例立即显示图像的方法(使用图像的Base64编码版本),同时将其上载到服务器,而无需等待操作完成.这种方法的
-
Android studio实现画板功能
简单概述 在日常生活中,我们经常会突发一些奇思妙想,或是一个画面,或是几个符号.这时候无法使用拍照或者打字功能实现,想拿笔记下又身边找不到笔.于是我琢磨能不能做一个手机端的画板. 效果图 实现过程 项目布局很简单 让我们来看代码:首先声明画笔,画板,和坐标 public class MainActivity extends AppCompatActivity{ Paint paint; Canvas canvas; ImageView imageview; Bitmap bitmap,newbi
-
Android实现绘画板功能
实现流程: 一.预期效果 二.设置横竖屏切换 三.确定布局 四.自定义滑动条 五.绘画区域 六.MainActivity 实现步骤: 一.预期效果 二.设置横竖屏切换 screenOrientation属性 作用 user 用户当前设置的方向. unspecified 由系统选择显示方向,不同的设备可能会有所不同.(旋转手机,界面会跟着旋转) landscape 限制界面为横屏,旋转屏幕也不会改变当前状
随机推荐
- Java使用正则表达式对注册页面进行验证功能实现
- Linux下启动Oracle服务和监听程序步骤
- SQL2008中SQL应用之- 死锁(Deadlocking)
- 金山反病毒20041212_日报
- Sql Server 应用程序的高级Sql注入第1/2页
- Java的字符串中对子字符串的查找方法总结
- Java实现简单的分页功能
- Java如何在不存在文件夹的目录下创建文件
- Xen虚拟化进阶篇 Xen平台下虚拟机的实时迁移
- 自己编写的支持Ajax验证的JS表单验证插件
- C#保存上传来的图片示例代码
- python基于pygame实现响应游戏中事件的方法(附源码)
- Go语言中字符串的查找方法小结
- android编程之下拉刷新实现方法分析
- php中Y2K38的漏洞解决方法实例分析
- android图像绘制(六)获取本地图片或拍照图片等图片资源
- Linux中hostname修改方法详解
- MSSQL 2008 自动备份数据库的设置方法
- java实现微信公众平台自定义菜单的创建示例
- Java判断字符串中是否包含中文方法