canvas绘图的强大功能，让人前仆后继的去研究它。代码全部加起来不足百行。还用到了h5中的和
使得页面更加简洁。
本文只用了鼠标的三个事件 onmousedown onmousemoveonmouseup就轻松实现了网页画板的制作。
上代码：
#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;
}
CANVAS制作简单在线画板
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.οnchange=function(){
demo.style.height=size.value+"px";
}
//使得color的颜色与演示线条的颜色一致
color.οnchange=function(){
demo.style.background=color.value;
}
var flag=false;
//鼠标按下
canvas.οnmοusedοwn= 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.οnmοusemοve= function (e) {
var mouseX= e.pageX-this.offsetLeft;
var mouseY= e.pageY-this.offsetTop;
if(flag){
cxt.lineTo(mouseX,mouseY);
cxt.stroke();
}
}
//鼠标松开
canvas.οnmοuseup= function (e) {
flag=false;
}
大家做成后的木模样
html --- canvas --- javascript --- 在线画板
canvas功能十分强大,制作一个简易画板易如反掌,主要涉及canvas的画线能力,javascript鼠标点击事件 如有问题请参考:/857.htm ...
H5中canvas标签制作在线画板
1.介绍 左键点击下移动开始画图.放开鼠标不在画图. 2.重要使用理论 query的使用: 鼠标的按下mousedown 鼠标的移动mousemove 鼠标的放开mouseup 3.程序
canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表
制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式
画画板 ...
使用canvas制作一个移动端画板
概述 使用canvas做一个画板,代码里涵盖了一些canvas绘图的基本思想,各种工具的类也可以分别提出来用 详细 代码下载:/demo/10503.h ...
如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
基于HTML5 Canvas的网页画板实现教程
HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...
小强的HTML5移动开发之路(10)——在线画板
来自:/dawanganban/article/details/18094557 在这一篇文章中我们用html5来实现一个在线的画板,玩过你画我猜的朋友今天也可 ...
Canvas制作的下雨动画
简介 在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨:http://codepen.io/natewile ...
用Canvas制作简单的画图工具
今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...
随机推荐
hadoop2.6.4 搭建单机模式
注(要先安装jdk,最好jdk版本>=1.7) 安装jdk /zhangXingSheng/p/6228432.html 给普通用户添加su ...
Linux_scp
scp是securecopy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...
BZOJ 2957 楼房重建
Description 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无聊地看着窗外发呆,数自己能够看到多少栋房子. 为了简化问题,我们考虑这些 ...
Selenium2+python自动化14-iframe
前言 有很多小伙伴在拿163作为登录案例的时候,发现不管怎么定位都无法定位到,到底是什么鬼呢,本篇详细介绍iframe相关的切换 以/登录页面10为案例,详细介绍 ...
Atitit.现实生活中最好使用的排序方法-----ati排序法总结
Atitit.现实生活中最好使用的排序方法-----ati排序法总结 1.现在的问题 1 2.排序的类别::插入排序//交换排序//选择排序(每次最小/大排在相应的位置)//归并排序//基数排 ...
Linq之IQueryable接口与IEnumberable区别
IEnumerable接口 公开枚举器,该枚举器支持在指定类型的集合上进行简单迭代.也就是说:实现了此接口的object,就可以直接使用foreach遍历此object: IEnumerable 包含 ...
开心菜鸟学习系列学习笔记－－－－－－－－－－－－nodejs util公共函数
global 在最外层定义的变量: 全局对象的属性: 隐式定义的变量(未定义直接赋值的变量). 一.processprocess 是一个全局变量,即 global 对象的属性 ...
9273:PKU2506Tiling
9273:PKU2506Tiling 来源:/ch0202/9273/ 总时间限制:2000ms 单个测试点时间限制:1000ms内存限制:131072 ...
linux上源码编译安装mysql-5.6.28
在 linux 上编译安装 mysql-.tar.gz / mysql下载地址: /downloads/mysql/#d ...
protocol buffers生成go代码原理
本文描述了protocol buffers使用.proto文件生成pb.go文件的过程 编译器 编译器需要插件来编译环境,使用如下方式安装插件:go get /golang/pro ...
