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="data:images/Brush.png"/></li>

      <li id="means_eraser" onclick="drawEraser(1)"><img src="data:images/Eraser.png"/></li>

      <li id="means_paint" onclick="drawPaint(2)"><img src="data:images/Paint.png"/></li>

      <li id="means_straw" onclick="drawStraw(3)"><img src="data:images/Straw.png"/></li>

      <li id="means_text" onclick="drawtext(4)"><img src="data:images/text.png"/></li>

      <li id="means_magnifier" onclick="drawMagnifier(5)"><img src="data:images/Magnifier.png"/></li>

    </ul>

  </li>

  <li>

  <h3>形状</h3>

      <hr/>

        <ul id="shape">

      <li id="shape_line" onclick="drawLine(6)" ><img src="data:images/line.png"/></li>

      <li id="shape_arc" onclick="drawArc(7)" ><img src="data:images/arc.png"/></li>

      <li id="shape_rect" onclick="drawRect(8)"><img src="data:images/rect.png"/></li>

      <li id="shape_poly" onclick="drawPoly(9)"><img src="data:images/poly.png"/></li>

      <li id="shape_arcfill" onclick="drawArcfill(10)"><img src="data:images/arcfill.png"/></li>

      <li id="shape_rectfill" onclick="drawRectfill(11)" ><img src="data:images/rectfill.png"/></li>

    </ul>

  </li>

  <li>

  <h3>线宽</h3>

      <hr/>

    <ul id="size">

      <li id="size_line1px" onclick="setLine(0)"><img src="data:images/line1px.png"/></li>

      <li id="size_line3px" onclick="setLine(1)"><img src="data:images/line3px.png"/></li>

      <li id="size_line5px" onclick="setLine(2)"><img src="data:images/line5px.png"/></li>

      <li id="size_line8px" onclick="setLine(3)"><img src="data: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 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;
}

H TML5 之（5）一个在线画图板的更多相关文章

Java 从零开始实现一个画图板、以及图像处理功能，代码可复现
Java 从零开始实现一个画图板.以及图像处理功能,代码可复现这是一个学习分享博客,带你从零开始实现一个画图板.图像处理的小项目,为了降低阅读难度,本博客将画图板的一步步迭代优化过程展示给读者,篇幅 ...
iOS开发之画图板(贝塞尔曲线)
贝塞尔曲线,听着挺牛气一词,不过下面我们在做画图板的时候就用到贝塞尔绘直线,没用到绘制曲线的功能.如果会点PS的小伙伴会对贝塞尔曲线有更直观的理解.这篇博文的重点不在于如何用使用贝塞尔曲线,而是利用贝 ...
很值得学习的java 画图板源码
很值得学习的java 画图板源码下载地址:http://download.csdn.net/source/2371150 package minidrawpad; import java.awt.*; ...
JAVA 画图板实现（基本画图功能+界面UI）二、功能实现及重绘实现
上篇博客中介绍了界面的实现方法,在这篇博客中将对每个按钮的功能的实现进行讲解并介绍重绘首先肯定要添加事件监听机制了,那么问题来了,事件源对象是谁?需要添加什么方法?事件接口是什么? 1.我们需要点击 ...
wxPython 画图板
终于开始Python学习之旅了,姑且以一个“画图板”小项目开始吧.放慢脚步,一点一点地学习. 1月28日更新第一次遇到的麻烦便是“重绘”,查了好多资料,终于重绘成功了. #-*- encoding: ...
构建一个在线ASCII视频流服务
构建一个在线ASCII视频流服务 2018-03-26 正常的文章 1685 什么是ASCII视频流服务? 其实这个名字是咱胡乱起的,具体叫啥我也不清楚,但效果如下: 大家可以在自己的命令行里试下, ...
用css控制一个DIV画图标。
在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...
【示例代码】HTML+JS 画图板源码分享
一个有趣的画图板, 用了 HTML5中的本地存储.下载.canvas 等技术,这个项目中用到了canvas 的很多基础功能,初学者可以学习一下 . 建议开发童鞋使用统一开发环境UDE来进行查看.调试. ...
Java版简易画图板的实现
Windows的画图板相信很多人都用过,这次我们就来讲讲Java版本的简易画板的实现. 基本的思路是这样的:画板实现大致分三部分:一是画板界面的实现,二是画板的监听以及画图的实现,三是画板的重绘.(文 ...

随机推荐

sed 变量替换把m.txt文件中的$i替换成$j
zabbix:/root/zabbix# cat a1.sh for j in {1..48} do sed "s/\$i/$j/g" m.txt >>tmp.txt ...
【Python Network】使用DOM生成XML
单纯的为DOM树添加结点. #!/usr/bin/env python # Generating XML with DOM - Chapter 8 - domgensample.py from xml ...
开源库CImg 数据格式存储
CImg为开源图像处理库,仅有一个头文件CImg.h便包含了对图像的所有处理函数,函数操作简单,编程方便,但国内使用者较少其homepage:http://cimg.sourceforge.net/ ...
关于 Unity NavMesh 数据的导出和使用
上周的工作重点转移到服务器寻路上来,刚刚做完没几天,总结一下,当时团队讨论的结果是使用 Unity 原生的 NavMesh 系统,然后将数据导出到服务器使用.我最初的思路是将导出的网格加载到服务器后, ...
(转)PQ分区魔术师中文版分区教程
PQ分区魔术师中文版分区的图解,图文并茂很多朋友提到硬盘分区,觉得不敢轻易去尝试,怕得不偿失,深度xp系统下载在此分享下pq分区的图解详见下图: 1)这是用的雨林木风系统的光盘,其他系统盘一样 2)首 ...
前端自动生成/加载CSS
前言: 1.我很懒! 2.写样式时,很多时候需要单独设置长度.宽度.内间距.外间距等.于是,就会有很多CSS代码会出现很多类似以下的代码: .w20: { width: 20px; } .mt10: ...
linux设置LD_LIBRARY_PATH变量
在 Linux 下,如果你写好了自己的动态链接库,需要在其它程序里调用,则需要让这些程序能找到这些动态链接库.如果设置不对,会出现类似如下的错误: test: error while loading ...
PHP中使用函数array_merge()合并数组
如果明白数组其实就是map的话,我想你就会明白array_merge为什么要这么实现了 PHP中合并数组分成两种情况 1.如果这两个数组中有相同的字符串键名: <?php header('Con ...
AppiumLibrary
Strategy Example Description identifier Click Element|identifier=my_element Matches by @id or @name ...
Hibernate查询之HQL查询
转自:http://blog.csdn.net/xiao_yi/article/details/1733342 Criteria查询对查询条件进行了面向对象封装,符合编程人员的思维方式,不过HQL(H ...

H TML5 之 （5） 一个在线画图板

H TML5 之 （5） 一个在线画图板的更多相关文章

随机推荐

热门专题

H TML5 之（5）一个在线画图板

H TML5 之（5）一个在线画图板的更多相关文章