首页 > 代码库 > H TML5 之 （5） 一个在线画图板
H TML5 之 （5） 一个在线画图板
这里加入了点难度了，增加了对HTML很多时间的把握，对象的把握
index.html
<!DOCTYPE HTML><html><head><title>Paint</title><meta charset="gbk" /><link type="text/css" href="canvas.css" rel="stylesheet"/></head><body><header id="header">HTML5在线画图工具</header><section id="content"><!--工作区域--><ul id="tool"> <li> <h3>图像</h3> <hr/> <ul id="image"> <li><button id="saveimg">保存图片</button></li> <li><button id="clearimg">清空画板</button></li> </ul> </li> <li> <h3>工具</h3> <hr/> <ul id="means"> <li id="means_brush" onclick="drawBrush(0)"><img src="images/Brush.png"/></li> <li id="means_eraser" onclick="drawEraser(1)"><img src="images/Eraser.png"/></li> <li id="means_paint" onclick="drawPaint(2)"><img src="images/Paint.png"/></li> <li id="means_straw" onclick="drawStraw(3)"><img src="images/Straw.png"/></li> <li id="means_text" onclick="drawtext(4)"><img src="images/text.png"/></li> <li id="means_magnifier" onclick="drawMagnifier(5)"><img src="images/Magnifier.png"/></li> </ul> </li> <li> <h3>形状</h3> <hr/> <ul id="shape"> <li id="shape_line" onclick="drawLine(6)" ><img src="images/line.png"/></li> <li id="shape_arc" onclick="drawArc(7)" ><img src="images/arc.png"/></li> <li id="shape_rect" onclick="drawRect(8)"><img src="images/rect.png"/></li> <li id="shape_poly" onclick="drawPoly(9)"><img src="images/poly.png"/></li> <li id="shape_arcfill" onclick="drawArcfill(10)"><img src="images/arcfill.png"/></li> <li id="shape_rectfill" onclick="drawRectfill(11)" ><img src="images/rectfill.png"/></li> </ul> </li> <li> <h3>线宽</h3> <hr/> <ul id="size"> <li id="size_line1px" onclick="setLine(0)"><img src="images/line1px.png"/></li> <li id="size_line3px" onclick="setLine(1)"><img src="images/line3px.png"/></li> <li id="size_line5px" onclick="setLine(2)"><img src="images/line5px.png"/></li> <li id="size_line8px" onclick="setLine(3)"><img src="images/line8px.png"/></li> </ul> </li> <li> <h3>颜色</h3> <hr/> <ul id="color" > <li id="red" onclick="setColor(this,0)"></li> <li id="green" onclick="setColor(this,1)"></li> <li id="blue" onclick="setColor(this,2)"></li> <li id="yellow"onclick="setColor(this,3)" ></li> <li id="white" onclick="setColor(this,4)" ></li> <li id="black" onclick="setColor(this,5)" ></li> <li id="pink" onclick="setColor(this,6)" ></li> <li id="purple" onclick="setColor(this,7)" ></li> <li id="cyan" onclick="setColor(this,8)" ></li> <li id="orange" onclick="setColor(this,9)" ></li> </ul> </li></ul><!--绘图区域--> <canvas id="canvas" width="880" height="400" > 您的浏览器不支持标签，无法看到画布 </canvas></section><footer id="footer"></footer></body><script src="canvas.js"> </script></html>
-----------canvas.js 代码段
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");
//获取工具按钮的标签
//画笔
var Brush = document.getElementById("means_brush");
//橡皮
var Eraser = document.getElementById("means_eraser");
//油漆
var Paint = document.getElementById("means_paint");
//吸管
var Straw = document.getElementById("means_straw");
//文本
var text = document.getElementById("means_text");
//放大镜
var Magnifier = document.getElementById("means_magnifier");
//获取形状按钮的标签
//画线
var Line = document.getElementById("shape_line");
//圆圈
var Arc = document.getElementById("shape_arc");
//方框
var Rect = document.getElementById("shape_rect");
//多边形
var Poly = document.getElementById("shape_poly");
//填充原型
var Arcfill = document.getElementById("shape_arcfill");
//填充矩形
var Rectfill = document.getElementById("shape_rectfill");
//将12个放在一个组中
var actions= [Brush,Eraser,Paint,Straw,text,Magnifier,Line,Arc,Rect,Poly,Arcfill,Rectfill];
//获取线宽按钮标签
var line1px = document.getElementById("size_line1px");
var line3px = document.getElementById("size_line3px");
var line5px = document.getElementById("size_line5px");
var line8px = document.getElementById("size_line8px");
//把线宽放在一个数组中，
var Width = [line1px,line3px,line5px,line8px];
//获取颜色按钮
var Colorred = document.getElementById("red");
var Colorgreen = document.getElementById("green");
var Colorblue = document.getElementById("blue");
var Coloryellow = document.getElementById("yellow");
var Colorwhite = document.getElementById("white");
var Colorblack = document.getElementById("black");
var Colorpink = document.getElementById("pink");
var Colorpurple = document.getElementById("purple");
var Colorcyan = document.getElementById("cyan");
var Colororange = document.getElementById("orange");
var Color = [Colorred,Colorgreen,Colorblue,Coloryellow,Colorwhite,Colorblack,Colorpink,Colorpurple,Colorcyan,Colororange];
function setStatus(Arr,num,type){ //设置状态函数
for(var i=0;i<Arr.length;i++){
if(i==num){
if(type==1){
Arr[i].style.background = "yellow";
}else{
Arr[i].style.border = "1px solid #fff";
}
}else{
if(type==1){
Arr[i].style.background = "#ccc";
}else{
Arr[i].style.border = "1px solid #000";
}
}
}
}
//设置初始值
drawBrush(0);
//默认设置颜色
setColor(Colorred,0);
//默认设置线宽
setLine(0);
//列出所有的按钮函数
var startX = 0;
var startY = 0;
var strawX = 0;
var strawY = 0;
function drawBrush(num){ //画笔函数
setStatus(actions,num,1);
//画图步骤
//设置开始点 moveTO---鼠标按下
//绘制不同的点 lineTO --鼠标移动
//设置结束点 stroke -- 鼠标弹起
//鼠标按下
var flag = 0;
canvas.onmousedown = function(evt){
//获取当前鼠标相对于画布起起始点（0,0）的距离
//获取鼠标相对于页面顶端的距离
//整合w3c和IE
evt = window.event||evt;
//pageX pageY 鼠标相对页面的横纵坐标
// alert(evt.pageX+‘----‘+evt.pageY);
//获取当前对象相对于页面顶端的距离
//this.offsetLeft+‘---‘+this.offsetTop;
//鼠标相对0，0点的就是鼠标相对画布的距离
startX = evt.pageX - this.offsetLeft;
startY = evt.pageY - this.offsetTop;
//alert(startX);
//alert(startY);
//判断一下鼠标是否按下
flag = 1;
cxt.beginPath();
cxt.moveTo(startX,startY);
}
//鼠标移动
canvas.onmousemove = function(){
evt = window.event||evt;
var endX = evt.pageX - this.offsetLeft;
var endY = evt.pageY - this.offsetTop;
//alert(endX+‘--‘+endY);
if(flag){
cxt.lineTo(endX,endY);
cxt.stroke();
}
}
//鼠标弹起
canvas.onmouseup = function(){
flag = 0;
cxt.closePath();
}
//鼠标移除
canvas.onmouseout = function(){
flag = 0;
}
}
function drawEraser(num){ //橡皮函数
setStatus(actions,num,1);
var flag = 0;
canvas.onmousedown = function(evt){
evt = window.event||evt;
var startX = evt.pageX - this.offsetLeft;
var startY = evt.pageY - this.offsetTop;
flag = 1;
cxt.beginPath();
if(flag){
cxt.clearRect(startX-cxt.lineWidth,startY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);
}
}
//鼠标移动
canvas.onmousemove = function(){
evt = window.event||evt;
var endX = evt.pageX - this.offsetLeft;
var endY = evt.pageY - this.offsetTop;
if(flag){
cxt.clearRect(endX-cxt.lineWidth,endY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);
}
}
//鼠标弹起
canvas.onmouseup = function(){
flag = 0;
cxt.closePath();
}
//鼠标移除
canvas.onmouseout = function(){
flag = 0;
}
}
function drawPaint(num){ //油漆函数
setStatus(actions,num,1);
var flag = 0;
canvas.onmousedown = function(evt){
evt = window.event||evt;
var startX = evt.pageX - this.offsetLeft;
var startY = evt.pageY - this.offsetTop;
flag = 1;
cxt.beginPath();
cxt.fillRect(0,0,880,400);
}
//鼠标移动
canvas.onmousemove = function(){
}
//鼠标弹起
canvas.onmouseup = function(){
flag = 0;
cxt.closePath();
}
//鼠标移除
canvas.onmouseout = function(){
flag = 0;
}
}
//吸管函数
function drawStraw(num){
setStatus(actions,num,1);
var flag = 0;
canvas.onmousedown = function(evt){
evt = window.event||evt;
var strawX = evt.pageX - this.offsetLeft;
var strawY = evt.pageY - this.offsetTop;
flag = 1;
cxt.beginPath();
var obj = cxt.getImageData(strawX,strawY,1,1);
var color = ‘rgb(‘+obj.data[0]+‘,‘+obj.data[1]+‘,‘+obj.data[2]+‘)‘;
cxt.strokeStyle = color;
cxt.fillStyle = color;
//alert(color) ;
}
//鼠标移动
canvas.onmousemove = function(){
}
//鼠标弹起
canvas.onmouseup = function(){
flag = 0;
cxt.closePath();
}
//鼠标移除
canvas.onmouseout = function(){
flag = 0;
}
}
//文本函数
function drawtext(num){
setStatus(actions,num,1);
}
//放大镜函数
function drawMagnifier(num){
setStatus(actions,num,1);
}
var arcX = 0;
var arcY = 0;
var rectX = 0;
var rectY = 0;
var polyX = 0;
var polyY = 0;
function drawLine(num){ //画线函数
setStatus(actions,num,1);
//画图步骤
var flag = 0;
canvas.onmousedown = function(evt){
evt = window.event||evt;
var startX = evt.pageX - this.offsetLeft;
var startY = evt.pageY - this.offsetTop;
flag = 1;
cxt.beginPath();
cxt.moveTo(startX,startY);
}
//鼠标弹起
canvas.onmouseup = function(evt){
evt = window.event||evt;
var endX = evt.pageX - this.offsetLeft;
var endY = evt.pageY - this.offsetTop;
if(flag){
cxt.lineTo(endX,endY);
cxt.stroke();
}
flag = 0;
cxt.closePath();
}
//鼠标移除
canvas.onmouseout = function(){
flag = 0;
}
}
function drawArc(num){ //圆圈函数
setStatus(actions,num,1);
//画图步骤
var flag = 0;
canvas.onmousedown = function(evt){
evt = window.event||evt;
arcX = evt.pageX - this.offsetLeft;
arcY = evt.pageY - this.offsetTop;
flag = 1;
cxt.beginPath();
//cxt.moveTo(startX,startY);
}
//鼠标弹起
canvas.onmouseup = function(evt){
evt = window.event||evt;
var endX = evt.pageX - this.offsetLeft;
var endY = evt.pageY - this.offsetTop;
var arc_endX = endX - arcX ;
var arc_endY = endY - arcY ;
var c = Math.sqrt(arc_endX*arc_endX + arc_endY*arc_endY);
if(flag){
cxt.arc(arcX,arcY,c,0,360,false);
//cxt.lineTo(endX,endY);
cxt.stroke();
}
flag = 0;
cxt.closePath();
}
//鼠标移除
canvas.onmouseout = function(){
flag = 0;
}
}
function drawRect(num){ //方框函数
setStatus(actions,num,1);
//画图步骤
var flag = 0;
canvas.onmousedown = function(evt){
evt = window.event||evt;
rectX = evt.pageX - this.offsetLeft;
rectY = evt.pageY - this.offsetTop;
flag = 1;
cxt.beginPath();
}
//鼠标弹起
canvas.onmouseup = function(evt){
evt = window.event||evt;
var endX = evt.pageX - this.offsetLeft;
var endY = evt.pageY - this.offsetTop;
var rect_endX = endX - rectX ;
var rect_endY = endY - rectY ;
if(flag){
cxt.strokeRect(rectX,rectY,rect_endX,rect_endY);
cxt.fill(); }
flag = 0;
cxt.closePath();
}
//鼠标移除
canvas.onmouseout = function(){
flag = 0;
}
}
function drawPoly(num){ //多边形函数
setStatus(actions,num,1);
//画图步骤
canvas.onmousedown=function(evt){
evt=window.event||evt;
polyX=evt.pageX-this.offsetLeft;
polyY=evt.pageY-this.offsetTop;
}
canvas.onmouseup=function(evt){
evt=window.event||evt;
var endX=evt.pageX-this.offsetLeft;
var endY=evt.pageY-this.offsetTop;
cxt.beginPath();
//将画笔移动到右下角的顶点
cxt.moveTo(endX,endY);
//计算左下角的顶点坐标
var lbX=2*polyX-endX;
var lbY=endY;
cxt.lineTo(lbX,lbY);
//设置第三个顶点的坐标
var tmpC=2*(endX-polyX);
var tmpA=endX-polyX;
var tmpB=Math.sqrt(tmpC*tmpC-tmpA*tmpA);
//计算最上面顶点坐标
//endY-tmpB 定点的Y坐标 polyX是顶点的X坐标
//画到顶点
cxt.lineTo(polyX,endY-tmpB);
//封闭路径->画出来
cxt.closePath();
cxt.stroke();
}
canvas.onmousemove=null;
canvas.onmouseout=null;
}
function drawArcfill(num){ //填充圆形函数
setStatus(actions,num,1);
//画图步骤
var flag = 0;
canvas.onmousedown = function(evt){
evt = window.event||evt;
arcX = evt.pageX - this.offsetLeft;
arcY = evt.pageY - this.offsetTop;
flag = 1;
cxt.beginPath();
}
//鼠标弹起
canvas.onmouseup = function(evt){
evt = window.event||evt;
var endX = evt.pageX - this.offsetLeft;
var endY = evt.pageY - this.offsetTop;
var arc_endX = endX - arcX ;
var arc_endY = endY - arcY ;
var c = Math.sqrt(arc_endX*arc_endX + arc_endY*arc_endY);
if(flag){
cxt.arc(arcX,arcY,c,0,360,false);
cxt.fill();
}
flag = 0;
cxt.closePath();
}
//鼠标移除
canvas.onmouseout = function(){
flag = 0;
}
}
function drawRectfill(num){ //填充矩形函数
setStatus(actions,num,1);
//画图步骤
var flag = 0;
canvas.onmousedown = function(evt){
evt = window.event||evt;
rectX = evt.pageX - this.offsetLeft;
rectY = evt.pageY - this.offsetTop;
flag = 1;
cxt.beginPath();
}
//鼠标弹起
canvas.onmouseup = function(evt){
evt = window.event||evt;
var endX = evt.pageX - this.offsetLeft;
var endY = evt.pageY - this.offsetTop;
var rect_endX = endX - rectX ;
var rect_endY = endY - rectY ;
if(flag){
cxt.fillRect(rectX,rectY,rect_endX,rect_endY);
cxt.fill(); }
flag = 0;
cxt.closePath();
}
//鼠标移除
canvas.onmouseout = function(){
flag = 0;
}
}
function setLine(num){ //线宽函数
setStatus(Width,num,1);
switch(num) {
case 0:
cxt.lineWidth=1;
break;
case 1:
cxt.lineWidth=3;
break;
case 2:
cxt.lineWidth=5;
break;
case 3:
cxt.lineWidth=8;
break;
default:
cxt.lineWidth=1;
}
}
function setColor(obj,num){ //颜色函数
setStatus(Color,num,0);
cxt.fillStyle = obj.id;
cxt.strokeStyle = obj.id;
}
------canvas.css CSS 段
* {
padding:0;
margin:0;
list-style:none;
}
body {
background:#ABCDEF;
}
#header {
width:900px;
height:80px;
font-size:40px;
margin:0 auto;
text-align:center;
line-height:80px;
background:blue;
}
h3 {
}
#content {
width:880px;
height:550px;
background:gray;
margin:0 auto;
text-align:center;
padding:10px;
}
#tool { height:150px;}
#tool li {
float:left;
width:175px;
height:130px;
background:#ccc;
border-right:1px solid red;
}
#image {
text-align:left;
}
#image li {
height:25px;
list-style:square inside;
}
#image li button{
background:gray;
border:1px solid black;
}
#image li button:hover {background:gray;border:1px solid #fff;}
#means,#shape {
padding:20px;
}
#means li,#shape li{
height:20px;
width:40px;
border:1px solid #000;
margin-bottom:2px;
}
#means li:hover,#shape li:hover {background:gray;border:1px solid #fff;}
#means img,#shape img {
height:20px;
width:20px;
}
#size { padding:10px; padding-left:25px;}
#size li{height:20px; width:120px;border:1px solid #ccc;}
#size li:hover {background:gray;border:1px solid #fff;}
#color{padding:25px;}
#color li{ width:20px; height:20px;margin-bottom:10px; margin-left:3px;border:1px solid #000;}
#color #red { background:red;}
#color #green { background:green;}
#color #blue { background:blue;}
#color #yellow { background:yellow;}
#color #white { background:white;}
#color #black { background:black;}
#color #pink { background:pink;}
#color #purple { background:purple;}
#color #cyan { background:cyan;}
#color #orange { background:orange;}
#color li:hover {background:gray;border:1px solid #fff;}
#canvas {background:#fff;}
#canvas:hover { cursor:crosshair;}
#footer {
width:900px;
height:30px;
margin:0 auto;
text-align:center;
background:blue;
}