HTML5 canvas画板
2012-01-05 17:13 二军 阅读(2516) 评论(0) 编辑 收藏 举报
我弄运行代码老是弄不好。烦。
如果有同好html5 canvas的朋友，可以加我建的canvas群：184858197
可以讨论canvas或node.js
源代码如下：（你可以直接复制到本地）
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画图</title>
<script type="text/javascript">
window.onload = function() {
$("yanse").value = "#000";
$("hSize").value = "10";
$("hStyle").value = "round";
$("hjoin").value = "miter";
$("liu").value="0";
$("touming").value="100";
/***********全局变量********************/
var Xtemp = $("temp"),
main = $("main"),
//图层容器
//临时绘图区
Xbox = $("box"),
//画形状区
mapWidth = Xtemp.getAttribute("width"),
//区宽
mapHeight = Xtemp.getAttribute("height"),
//区高
temp = Xtemp.getContext("2d"),
box = Xbox.getContext("2d"),
Mx,
//鼠标移动的坐标X
My,
//Y
Cx,
//鼠标按下的坐标X
Yx,
//Y
suoyin = "画笔",
pan = false,
//判断鼠标是否弹起，如果是，绘画结束
yanse = $("yanse").value,
//绘制的颜色
hSize = $("hSize").value,
//流量
liu=$("liu").value,
//透明
touming=$("touming").value/100,
//画线的时候粗细
hStyle = $("hStyle").value,
//画线的时候样式
hJoin = $("hjoin").value,
yidong = false,
TuCeng,
deng,
guna = $("guna");
/************选项设置*****************************/
$("yanse").oninput = function() {
yanse = $("yanse").value; //改变颜色
$("sYanse").style.background = yanse;
}
$("hSize").oninput = function() {
hSize = $("hSize").value; //改变画笔大小
}
guna.onfocus = function() {
var dingshi=setInterval(gung, 100);
}
guna.onblur=function(){
clearInterval(dingshi)
}
function gung() {
hSize = $("hSize").value; //改变画笔大小
}
$("hStyle").onchange = function() {
hStyle = $("hStyle").value; //改变画笔样式
}
$("hjoin").onchange = function() {
hJoin = $("hjoin").value; //改变画笔样式
}
$("liu").oninput=function(){
liu=$("liu").value;//流量
}
$("touming").oninput=function(){
touming=$("touming").value/100;//流量
}
/*******************画图**************************/
var player = {
name: temp,
fill: function() {
this.name.globalAlpha=touming;
this.name.shadowBlur = liu; //模糊程度
this.name.shadowColor = yanse; //模糊颜色
this.name.fillStyle = yanse;
this.name.fillRect(Cx, Cy, Mx - Cx, My - Cy);
},
stroke: function() {
this.name.globalAlpha=touming;
this.name.lineWidth = hSize;
this.name.shadowBlur = liu; //模糊程度
this.name.shadowColor = yanse; //模糊颜色
this.name.strokeStyle = yanse;
this.name.strokeRect(Cx, Cy, Mx - Cx, My - Cy);
},
arc:function(){
this.name.beginPath();
this.name.globalAlpha=touming;
this.name.lineWidth = hSize;
this.name.shadowBlur = liu; //模糊程度
this.name.shadowColor = yanse; //模糊颜色
this.name.strokeStyle = yanse;
this.name.arc(Cx, Cy, Mx - Cx, 0,Math.PI*2, true);
this.name.fill();
}
}
/****************画布容器位置*****************************/
var can = $("canvas");
Tleft(can, 80);
Ttop(can, 45);
var Xleft = parseInt(can.style.left);
var Xtop = parseInt(can.style.top);
var top = $("top");
tuodong(top, can);
/******************导航***************************************/
var dd = $("Xtop").getElementsByTagName("li")[0].getElementsByTagName("h1")[0];
Del_space($("leftnav")); //处理空格
Del_space($("leftnav").childNodes[1]); //处理空格
var index = $("leftnav").childNodes[1].childNodes; //得到样式索引
index[0].style.fontSize = "18px"; //导航铅笔大小
index[0].style.color = "#ff0000"; //导航铅笔颜色
for (var i = 0; i < index.length; i++) {
index[i].onclick = function() {
//这里是左边的导航切换样式
var suoyou = this.parentNode.childNodes;
for (var j = 0; j < suoyou.length; j++) {
suoyou[j].style.fontSize = "12px";
suoyou[j].style.color = "#000";
}
this.style.fontSize = "18px";
this.style.color = "#ff0000";
dd.innerHTML = this.innerHTML; //顶部的
suoyin = this.innerHTML; //索引
}
}
/*****************临时画布事件*****************************/
var linshi=hSize/(Math.PI*2);
main.onmousemove = function(event) {
if (pan == false) {
return false;
}
Mx = event.clientX - (Xleft + 30);
My = event.clientY - (Xtop + 30);
temp.clearRect(0, 0, mapWidth, mapHeight);
Xplayer = player;
Xplayer.name = temp;
//temp.fillRect(0, 0, mapWidth, mapHeight);
switch (suoyin) {
case "画笔":
box.lineTo(Mx, My);
box.stroke();
break;
case "铅笔":
box.lineTo(Mx, My);
box.stroke();
break;
case "矩形":
Xplayer.fill();
break;
case "边框":
Xplayer.stroke();
break;
case "圆":
Xplayer.arc();
break;
case "擦除":
box.clearRect(Mx, My, hSize, hSize);
break;
}
}
main.onmousedown = function(event) {
pan = true;
Cx = event.clientX - (Xleft + 30);
Cy = event.clientY - (Xtop + 30);
switch (suoyin) {
case "画笔":
box.strokeStyle = yanse;
box.lineWidth = hSize;
box.lineCap = hStyle;
box.linejoin = hJoin;
box.shadowBlur = 10; //模糊程度
box.shadowColor = yanse; //模糊颜色
box.beginPath();
box.moveTo(Cx, Cy);
box.lineTo(Cx,Cy)
box.stroke();
break;
case "铅笔":
box.strokeStyle = yanse;
box.lineWidth = hSize;
box.lineCap = hStyle;
box.linejoin = hJoin;
box.shadowBlur = 0; //模糊程度
box.shadowColor = yanse; //模糊颜色
box.beginPath();
box.moveTo(Cx, Cy);
box.lineTo(Cx,Cy)
box.stroke();
break;
case "擦除":
box.clearRect(Cx, Cy, hSize, hSize);
break;
}
}
main.onmouseup = function() {
pan = false;
var bPlayer = player;
bPlayer.name = box;
switch (suoyin) {
case "矩形":
bPlayer.fill();
break;
case "圆":
bPlayer.arc();
break;
case "边框":
bPlayer.stroke();
break;
case "填充":
box.fillRect(0, 0, mapWidth, mapHeight)
break;
}
}
/********************新建图层***************/
var num = 1; //图层面板新建索引
var tucengSuoyin = $("tuceng"); //图层面板
Del_space(tucengSuoyin) //图层面板
var tucesuo = tucengSuoyin.childNodes; //图层面板单击索引
tucesuo[0].style.backgroundColor = "#003CFF";
$("xinjian").onclick = function() {
//图层
var tuceng = document.createElement("canvas");
var diyi = main.getElementsByTagName("canvas")[0];
tuceng.setAttribute("width", 500);
tuceng.setAttribute("height", 500);
tuceng.setAttribute("id", "tuceng" + num);
main.insertBefore(tuceng, diyi);
//图层面板
var tnew = document.createElement("li");
var tucengno1 = tucengSuoyin.getElementsByTagName("li")[0];
tnew.setAttribute("id", num);
tucengSuoyin.insertBefore(tnew, tucengno1);
$(num).innerHTML = "图层" + num;
num++;
/********切换变换样式**********/
for (var i = 0; i < num; i++) {
tucesuo[i].onclick = function() {
var suoyou = this.parentNode.childNodes;
for (var j = 0; j < suoyou.length; j++) {
suoyou[j].style.backgroundColor = "";
}
this.style.backgroundColor = "#003CFF";
//alert(num)
var iid = this.getAttribute("id");
// Xbox=$("tuceng"+iid);
// box = Xbox.getContext("2d");
}
}
}
//(tuce.innerHTML)
/*********************移动图形事件**************************/
//var mainX, mainY, kongX, kongY;
/*********************拾色器************************************/
var shiseqi = $("shiseqi");
var shiseT = shiseqi.childNodes[0];
Tleft(shiseqi, 150);
Ttop(shiseqi, 150);
$("sYanse").onclick = function() {
shiseqi.style.display = "block";
}
$("ok").onclick = function() {
shiseqi.style.display = "none";
}
tuodong(shiseT, shiseqi)
/***************背景画布*************************************/
var bg = $("bg");
var bgColor = bg.getContext("2d");
var gd = bgColor.createLinearGradient(0, 0, mapWidth, mapHeight);
gd.addColorStop(0, "#333");
gd.addColorStop(1, "#000");
bgColor.fillStyle = gd;
bgColor.fillRect(0, 0, mapWidth, mapHeight);
/****************工具箱******************************/
var leftnav = $("leftnav");
var leftTuo = leftnav.getElementsByTagName("h1")[0];
Tleft(leftnav, 10);
Ttop(leftnav, 45);
tuodong(leftTuo, leftnav);
/*****************面板**************************/
var xx = $("xuanxiang");
Tleft(xx, 700);
Ttop(xx, 45);
tuodong(xx, xx);
/*******保存******/
var save = $("save");
save.onmousedown = function() {
window.location.href = $("box").toDataURL()
}
/**********************拖动条*****************************/
Tleft(guna, 10);
Ttop(guna, - 5);
tuodong(guna, guna, "left");
$("gunBg").style.width = guna.style.left; //初始背景
}
/**************拖动***************************/
function tuodong(tuo, dong, fangxiang) {
var tuoX, tuoY, yiX, yiY;
var tuoPan = false;
var xiang = fangxiang;
tuo.onmousedown = function(event) {
//捕获鼠标事件
if (this.setCapture) {
this.setCapture();
} else if (window.captureEvents) {
window.captureEvents(EVEND.MOUSEMOVE)
}
//鼠标按下的时候记下坐标
// switch (xiang) {
var canX = parseInt(dong.style.left);
var canY = parseInt(dong.style.top);
tuoPan = true;
tuoX = event.clientX - canX; //现在鼠标坐标减去对象坐标＝鼠标相对对象的坐标
tuoY = event.clientY - canY;
}
tuo.onmousemove = function(event) {
//鼠标移动的时候
if (tuoPan == false) {
return false;
}
if (xiang == "left") {
yiX = event.clientX;
yiX = yiX - tuoX; //现在坐标减去鼠标按下的时候的相对坐标＝目的坐标
if (yiX > 100 || yiX < 1) {
return false;
}
$("hSize").value = yiX;
hSize = 100; //改变画笔大小
$("gunBg").style.width = yiX + "px"; //滚动条的背景
dong.style.left = yiX + "px";
} else {
yiX = event.clientX;
yiY = event.clientY;
yiX = yiX - tuoX; //现在坐标减去鼠标按下的时候的相对坐标＝目的坐标
yiY = yiY - tuoY;
dong.style.left = yiX + "px";
dong.style.top = yiY + "px";
}
}
tuo.onmouseup = function() {
//取消鼠标捕获
if (this.releaseCapture) {
this.releaseCapture();
} else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE);
}
tuoPan = false;
if (dong.getAttribute("id") == "canvas") {
Xleft = parseInt(can.style.left);
Xtop = parseInt(can.style.top);
}
}
}
/****************获取id**************************/
function $(name) {
return document.getElementById(name);
}
/****************过滤空格***********************/
function Del_space(elem) {
var elem_child = elem.childNodes; //获取所有子元素
for (var i = 0; i < elem_child.length; i++) {
//如果是文本节点，并且内容只包含空格则删除该节点
if (elem_child[i].nodeName == "#text" && ! /\S/.test(elem_child[i].nodeValue)) {
elem.removeChild(elem_child[i]); //如果该元素为空格则删除
}
}
}
/*****************对象的left&&top***********************/
function Tleft(name, x) {
name.style.left = x + "px";
}
function Ttop(name, y) {
name.style.top = y + "px";
}
</script>
<style type="text/css">
body,nav,ul,li,h1{margin:0px auto;padding:0px;}
body{background-color:#C0C0C0;font-size:12px;font-family:'宋体';position:relative;width:100%;}
/**/
li{list-style-type:none;display:inline;}
.bor{height:1px;background-color:#ACA899;border:1px #fff solid;}
nav#topnav{position:absolute;left:10px;top:10px;}
/*工具箱*/
nav#leftnav{position:absolute;left:10px;top:15px;width:60px;background-color:#ECE9D8;border:3px solid #0017C1;border-color:#0017C1 #0427BC #0532C0;text-align:center;z-index:1;}/*导航*/
#leftnav li{display:block;margin-top:10px;cursor:pointer;}
#leftnav div{background-color:#808080;line-height:24px;text-align:center;}
/*画布*/
#canvas{width:560px;height:560px;position:absolute;left:80px;top:55px;background-color:#808080;border:1px solid #000;z-index:0;}
#cursor{position:absolute;top:100px;left:800px;border:1px solid #333;}
#main canvas{position:absolute;left:0px;top:0px;}
#bg{z-index:0;}
#temp{z-index:1;}
#box{z-index:2;}
/*top*/
#top{width:560px;height:30px;text-align:center;line-height:30px;}
#left{width:30px;height:500px;float:left;}
#main{position:relative;width:500px;height:500px;background-image:url(../img/bg.gif);cursor:crosshair;float:left;}//画布容器
#right{width:30px;height:500px;float:left;}
#bottom{width:560px;height:30px;float:left;}
/*选项板*/
#Xtop{height:40px;line-height:40px;padding-left:20px;background-color:#ECE9D8;z-index:9;}
#Xtop h1{display:inline;background-color:#ECE9D8;font-size:14px;}
/*选项*/
#xuanxiang{position:absolute;left:650px;top:15px;border:3px solid #0017C1;border-color:#0017C1 #0427BC #0532C0;z-index:1;}
#xuanxiang li{display:block;line-height:30px;}
#zuobiao{position:absolute;right:50px;}
#sYanse{width:20px;height:20px;float:left;background-color:#000;margin-top:4px;}
h1{background-color:#808080;cursor:move;}
/*保存*/
#save{cursor:pointer;line-height:30px;}
/*背景色面板*/
#shiseqi{display:none;position:absolute;left:700px;top:700px;width:100px;height:100px;z-index:99;}
/*滚动条*/
#gun{position:absolute;z-index:999;width:110px;height:10px;background-color:#333;}
#guna{width:10px;position:absolute;top:-5px;left:0px;}
#gunBg{height:10px;;background-color:#ff0000;}
</style>
</head>
<body>
<div id="shiseqi"><h1>拾色器</h1><input type="text" id="yanse" size="6"><input type="button" value="^_^" id="ok"/></div>
<ul id="Xtop">
<li><h1>画笔:</h1></li>
<li>粗细<input type="text" id="hSize" size="6"></li>
<li>笔头方式<select id="hStyle">
<option value="butt">粗</option>
<option value="round">圆</option>
<option value="squere">平</option>
</select>
</li>
<li>画笔头<select id="hjoin">
<option value="round">round</option>
<option value="round">bevel</option>
<option value="squere">miter</option>
</select>
</li>
<li>流量<input type="text" id="liu" size="6"></li>
<li>不透明度<input type="text" id="touming" size="6"></li>
<li id="save">
保存
</li>
<li>到我的<a href="http://www.shenmimi.com/blog" target="_blank">博客</a>或<a href="http:[url]www.shenmimi.com[/url]" target="_blank">论坛</a>上看看还有啥</li>
</ul>
<div id="gun">
<div id="gunBg"></div>
<input type="button" id="guna"/>
</div>
<nav id="leftnav">
<h1>工具箱</h1>
<ul>
<li>画笔</li>
<li>铅笔</li>
<li>矩形</li>
<li>边框</li>
<li>圆</li>
<li></li>
<li>擦除</li>
<li>填充</li>
</ul>
<div><span id="sYanse"></span></div>
<div id="rongqi"></div>
</nav>
<div id="canvas">
<div id="top"><h1>画布<h1></div>
<div id="left"></div>
<div id="main">
<canvas id="box" width="500" height="500"></canvas>
<canvas id="temp" width="500" height="500"></canvas>
<canvas id="bg" width="500" height="500"></canvas>
</div>
<div id="right"></div>
<div id="bottom"></div>
</div>
<div id="xuanxiang">
<h1>图层</h1>
<ul id="tuceng">
<li>默认</li>
</ul>
<ul>
<li id="xinjian">新建</li>
</ul>
</div>
</body>
</html>
