使用canvas制作在线画板
canvas绘图的强大功能,让人前仆后继的去研究它。代码全部加起来不足百行。还用到了h5中的<input type="color"/>和<input type="range"/>
使得页面更加简洁。
本文只用了鼠标的三个事件 onmousedown onmousemove onmouseup就轻松实现了网页画板的制作。
上代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{
border: 1px solid #333;
display: block;
margin:20px auto;
}
#color{
width:100px;
height:32px;
position:absolute;
right:115px;
top:200px;
}
#range{
width:100px;
height:32px;
position:absolute;
right:115px;
top:125px;
}
#demo{
background:black;
width:100px;
height:5px;
position:absolute;
right:115px;
top:100px;
}
</style>
</head>
<body background-color="rgba(0,0,0,0.5)">
<div class="box">
<h3 align="center">CANVAS制作简单在线画板</h3>
<canvas id="canvas" width="800" height="600"></canvas>
<input type="color" id="color"/>
<div id="demo"></div>
<input type="range" id="range" min="1" max="10"/>
</div>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var color=document.getElementById("color");
var size=document.getElementById("range");
var demo=document.getElementById("demo");
//根据size的变化来使得size上面的线条演示画笔粗细。
size.onchange=function(){
demo.style.height=size.value+"px";
}
//使得color的颜色与演示线条的颜色一致
color.onchange=function(){
demo.style.background=color.value;
}
var flag=false;
//鼠标按下
canvas.onmousedown= function (e) {
var mouseX= e.pageX-this.offsetLeft;
var mouseY= e.pageY-this.offsetTop;
flag=true;
cxt.beginPath();
cxt.lineWidth=size.value;
cxt.strokeStyle=color.value;
cxt.moveTo(mouseX,mouseY);
};
//鼠标移动
canvas.onmousemove= function (e) {
var mouseX= e.pageX-this.offsetLeft;
var mouseY= e.pageY-this.offsetTop;
if(flag){ cxt.lineTo(mouseX,mouseY);
cxt.stroke();
}
}
//鼠标松开
canvas.onmouseup= function (e) {
flag=false;
}
</script>
</body>
</html>
大家做成后的木模样
使用canvas制作在线画板的更多相关文章
- html --- canvas --- javascript --- 在线画板
canvas功能十分强大,制作一个简易画板易如反掌,主要涉及canvas的画线能力,javascript鼠标点击事件 如有问题请参考:http://www.html5party.com/857.htm ...
- H5中canvas标签制作在线画板
1.介绍 左键点击下移动开始画图.放开鼠标不在画图. 2.重要使用理论 query的使用: 鼠标的按下mousedown 鼠标的移动mousemove 鼠标的放开 mouseup 3.程序 <! ...
- canvas画画板,canvas画五角星,canvas制作钟表、Konva写钟表
制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...
- 使用canvas制作一个移动端画板
概述 使用canvas做一个画板,代码里涵盖了一些canvas绘图的基本思想,各种工具的类也可以分别提出来用 详细 代码下载:http://www.demodashi.com/demo/10503.h ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- 基于HTML5 Canvas的网页画板实现教程
HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...
- 小强的HTML5移动开发之路(10)——在线画板
来自:http://blog.csdn.net/dawanganban/article/details/18094557 在这一篇文章中我们用html5来实现一个在线的画板,玩过你画我猜的朋友今天也可 ...
- Canvas制作的下雨动画
简介 在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨: http://codepen.io/natewile ...
- 用Canvas制作简单的画图工具
今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...
随机推荐
- backup archivelog all
OLTP系统的生产库一般都是打开归档模式,当CUD操作频繁并且时常使用大批量处理时,每天的归档日志也是超级大的,如果长期保留这些归档日志磁盘空间消耗是很恐怖的,所以我们在使用RMAN进行数据库备份时 ...
- apple公司的潮起潮落——浪潮之巅
今天代码写不下去的时候,躺在床上看了一下浪潮之巅.翻了一下书目,选了apple公司那一篇. 其实apple公司的事情我已经听过不止一次了,但是每次都是间间断断地听说,都没有系统地了解它到底是经历了怎么 ...
- HDU-4414 Finding crosses 水题
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4414 直接暴力判断即可. //STATUS:C++_AC_15MS_232KB #include &l ...
- yuv 图像里的stride和plane的解释
stride可以翻译为:跨距 stride指在内存中每行像素所占的空间.如下图所示,为了实现内存对齐(或者其它的什么原因),每行像素在内存中所占的空间并不是图像的宽度. plane一般是以luma p ...
- 源码生成deb包
方法一 源码包要求是使用 automake 进行编译管理的. 安装路径不能指定为 /usr/local 下的目录,否则生成 deb 包期间报错. 制作的工具是 dh-make ,如果没有安装,要先安装 ...
- POJ3107--Godfather(树的重心)
vector建图被卡了..改为链式前向星500ms过的..差了四倍多?... 表示不太会用链表建图啊..自己试着写的,没看模板..嗯..果然错了..落了一句话orz 树的重心就是找到一个树中一个点,其 ...
- Mybatis上路_05-使用命令行自动生成
http://my.oschina.net/vigiles/blog/125127 目录[-] 1.数据准备: 1)建库: 2)建表: 3)预设数据: 2.编写Generator执行配置文件: 3.搭 ...
- 24C02操作--松瀚汇编源码
; ; P_CLKIIC EQU P1.2 ; P_DATIIC EQU P1.3 ; PM_DATIIC EQU P1M.3 ; EE_ADDR DS 1 ;地址寄存器 ; TMP3_IIC DS ...
- 有关UIImageView+AFNetworking 下载图片的线程问题
今天写了一个demo,从服务器获取图片,然后显示在cell上,大家都知道cell的重用机制,当往下拉的时候,上面的cell遮住了,下面的cell就会重用被遮住的cell, 贴代码: NSString ...
- Add-VMNetworkAdapterAcl(添加访问控制列表)
Add-VMNetworkAdapterAclCreates an ACL to apply to the traffic through a virtual machine network adap ...