• 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 {
    900px;
    height:80px;
    font-size:40px;
    margin:0 auto;
    text-align:center;
    line-height:80px;
    background:blue;

    }
    h3 {

    }
    #content {
    880px;
    height:550px;
    background:gray;
    margin:0 auto;
    text-align:center;
    padding:10px;
    }
    #tool { height:150px;}
    #tool li {
    float:left;
    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;
    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;
    20px;
    }
    #size { padding:10px; padding-left:25px;}
    #size li{height:20px; 120px;border:1px solid #ccc;}
    #size li:hover {background:gray;border:1px solid #fff;}
    #color{padding:25px;}
    #color li{ 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 {
    900px;
    height:30px;
    margin:0 auto;
    text-align:center;
    background:blue;
    }

    
    
    
    
    
    
    
    
    


  • 相关阅读:
    以色列人,印象
    周末之个人杂想(三)
    长春DotNet俱乐部会员群
    sharepoint中的ListViewWebPart和ViewToolBar的操作 Virus
    SharePoint2007中的WCM Virus
    SPWeb.ProcessBatchData Method Virus
    sharepoint中显示网页库item的webpart和显示列表库item的webpart Virus
    jquery在vs2008中智能提示的配置 Virus
    格式化sharepoint中取出来的字段值 Virus
    使用google的ajax API中的翻译小工具 Virus
  • 原文地址:https://www.cnblogs.com/sunxun/p/3826169.html
Copyright © 2020-2023  润新知