canvas的常用功能(电脑版)_莺语_前端开发者

前言:

  canvas可以单独算为前端的一大知识模块, 今天就研究一下.

  先做下前文铺垫:

    ①创建canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #000000;”></canvas>

    ②获取canvas

    var cavs = document.getElementById("cavs");           //获取canvas
    var ctx = cavs.getContext("2d");                     //可以理解为生成一个2d画笔
        ctx.moveTo(100, 100);                           //落笔点
        ctx.lineTo(200, 200);                          //结束点
    var cavs = document.getElementById("cavs");           //获取canvas
    var ctx = cavs.getContext("2d");                     //可以理解为生成一个2d画笔
        ctx.moveTo(100, 100);                           //落笔点
        ctx.lineTo(200, 200);                          //结束点

var//获取canvasvar//可以理解为生成一个2d画笔//落笔点//结束点

    ③常用样式

         ctx.strokeStyle = "#f00"                 //线条的颜色2
         ctx.lineWidth = 10;                    //线条粗细
         ctx.strokeStyle = "#f00"                 //线条的颜色2
         ctx.lineWidth = 10;                    //线条粗细

//线条的颜色2//线条粗细

    ④绘制线条

      ctx.stroke();            //绘制线条
      ctx.stroke();            //绘制线条

//绘制线条

    ⑤填充图案

     ctx.fillStyle = "yellow";            //填充颜色
     ctx.fill(); //进行填充
     ctx.fillStyle = "yellow";            //填充颜色
     ctx.fill(); //进行填充

//填充颜色

     ctx.fill(); //进行填充

    ⑥开始结束

         ctx.beginPath();    //开始
         ctx.closePath();    //结束
         ctx.beginPath();    //开始
         ctx.closePath();    //结束

//开始//结束

    ⑦其他

         var img = ctx.getImageData(x, y, width, height);     //截取canvas中图案
         ctx.putImageData(img, width, height)            //将img放到canvas中
         ctx.clearRect(x,y,canvas.width,canvas.height)         //清除画布
         var img = ctx.getImageData(x, y, width, height);     //截取canvas中图案
         ctx.putImageData(img, width, height)            //将img放到canvas中
         ctx.clearRect(x,y,canvas.width,canvas.height)         //清除画布

var//截取canvas中图案//将img放到canvas中//清除画布

 

正文:

  说再多也没用, 最终还是进行实战, 终于进入正文了;

  html部分

<div class="wrapper">
    <canvas id="cavs" width="1000" height="500"></canvas>
    <ul class="btn-list">
        <li><input type="color" id="colorBoard"></li>
        <li><input type="button" id="cleanBoard" value="清屏"></li>
        <li><input type="button" id="eraser" value="橡皮"></li>
        <li><input type="button" id="rescind" value="撤销"></li>
        <li><input type="range" id="lineRuler" value="线条" min="1" max="30"></li>
    </ul>
</div>
<div class="wrapper">
    <canvas id="cavs" width="1000" height="500"></canvas>
    <ul class="btn-list">
        <li><input type="color" id="colorBoard"></li>
        <li><input type="button" id="cleanBoard" value="清屏"></li>
        <li><input type="button" id="eraser" value="橡皮"></li>
        <li><input type="button" id="rescind" value="撤销"></li>
        <li><input type="range" id="lineRuler" value="线条" min="1" max="30"></li>
    </ul>
</div>

<div class=”wrapper”><canvas id=”cavs” width=”1000″ height=”500″></canvas><ul class=”btn-list”><li><input type=”color” id=”colorBoard”></li><li><input type=”button” id=”cleanBoard” value=”清屏”></li><li><input type=”button” id=”eraser” value=”橡皮”></li><li><input type=”button” id=”rescind” value=”撤销”></li><li><input type=”range” id=”lineRuler” value=”线条” min=”1″ max=”30″></li></ul></div>

  css部分

*{
  padding: 0;
  margin: 0;
}
.wrapper{
  margin: 15px;
}
.wrapper canvas{
  border:1px solid #000;
  border-radius: 25px;
  box-shadow:10px 10px 5px #999;
  margin-bottom: 20px;
}
.wrapper ul{
  width: 1000px;
  text-align: center;
}
.wrapper ul li{
  display: inline-block;
  margin-left: 40px;
}
.wrapper ul li input{
  display: block;
  background: #ddd;
  color: #000;
  border-radius: 25px;
  border:none;
  padding: 10px 20px;
  font-size: 15px;
  transition-duration: 0.2s;
}
.wrapper ul li input:hover{
  background: #999;
  border: 1px solid #f00;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.3);
}
*{
  padding: 0;
  margin: 0;
}
.wrapper{
  margin: 15px;
}
.wrapper canvas{
  border:1px solid #000;
  border-radius: 25px;
  box-shadow:10px 10px 5px #999;
  margin-bottom: 20px;
}
.wrapper ul{
  width: 1000px;
  text-align: center;
}
.wrapper ul li{
  display: inline-block;
  margin-left: 40px;
}
.wrapper ul li input{
  display: block;
  background: #ddd;
  color: #000;
  border-radius: 25px;
  border:none;
  padding: 10px 20px;
  font-size: 15px;
  transition-duration: 0.2s;
}
.wrapper ul li input:hover{
  background: #999;
  border: 1px solid #f00;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.3);
}

*
padding
0
margin
0
.wrapper

margin
15px
.wrapper canvas

border
1px solid #000
border-radius
25px
box-shadow
10px 10px 5px #999
margin-bottom
20px
.wrapper ul

width
1000px
text-align
center
.wrapper ul li

display
inline-block
margin-left
40px
.wrapper ul li input

display
block
background
#ddd
color
#000
border-radius
25px
border
none
padding
10px 20px
font-size
15px
transition-duration
0.2s
.wrapper ul li input:hover

background
#999
border
1px solid #f00
box-shadow
0 12px 16px 0 rgba(0,0,0,0.3)

  js部分

function ID(str) {
  return document.getElementById(str);
}

var darwingLineObj = {
  cavs:this.ID("canvas"),
  color:this.ID("color"),
  clear:this.ID("clear"),
  eraser:this.ID("eraser"),
  rescind:this.ID("rescind"),
  weight:this.ID("weight"),
  bool:false,
  arrImg:[],
  //初始化
  init:function(){
    this.draw();
  },
  draw:function(){ 
    var cavs = this.cavs,
        self = this,
        ctx = cavs.getContext("2d");
        ctx.lineWidth = 15;
        ctx.lineCap = "round";          //线条始终的样式
        ctx.lineJoin = "round";         //转弯的圆角

    var c_x = cavs.offsetLeft,          //元素距离左侧的位置
        c_y = cavs.offsetTop;           //canvas距离顶部
        

    cavs.onmousedown = function(e){
      e = e || window.event;
      self.bool = true;
      var m_x = e.pageX - c_x;
      var m_y = e.pageY - c_y;
      ctx.beginPath();
      ctx.moveTo(m_x,m_y);   //鼠标在画布上的触点

      var imgData = ctx.getImageData(0, 0, cavs.width, cavs.height);  //将每次画完拷贝到数组中
      self.arrImg.push(imgData);
    }

    cavs.onmousemove = function(e){
        if(self.bool){
          ctx.lineTo(e.pageX-c_x, e.pageY-c_y);
          ctx.stroke();
        }
      }

    cavs.onmouseup = function(e){
      self.bool = false;
      ctx.closePath();
    }

    self.color.onchange = function(e){      //设置颜色
      e = e || window.event;
      //console.log(e.target.value)
      ctx.strokeStyle = e.target.value;
    }

    self.clear.onclick = function(){
      ctx.clearRect(0,0,cavs.width,cavs.height)
    }

    self.eraser.onclick = function(){
      ctx.strokeStyle = "#fff";
    }

    self.rescind.onclick = function(){            //撤销的重点难点
      if (self.arrImg.length>0) {
        ctx.putImageData(self.arrImg.pop(),0,0)
      }
    }

    self.weight.onchange = function(e){       //设置线条粗细
      //console.log(e.target.value)
      ctx.lineWidth = e.target.value;     
    }

   }//draw end

}

darwingLineObj.init();
function ID(str) {
  return document.getElementById(str);
}

var darwingLineObj = {
  cavs:this.ID("canvas"),
  color:this.ID("color"),
  clear:this.ID("clear"),
  eraser:this.ID("eraser"),
  rescind:this.ID("rescind"),
  weight:this.ID("weight"),
  bool:false,
  arrImg:[],
  //初始化
  init:function(){
    this.draw();
  },
  draw:function(){ 
    var cavs = this.cavs,
        self = this,
        ctx = cavs.getContext("2d");
        ctx.lineWidth = 15;
        ctx.lineCap = "round";          //线条始终的样式
        ctx.lineJoin = "round";         //转弯的圆角

    var c_x = cavs.offsetLeft,          //元素距离左侧的位置
        c_y = cavs.offsetTop;           //canvas距离顶部
        

    cavs.onmousedown = function(e){
      e = e || window.event;
      self.bool = true;
      var m_x = e.pageX - c_x;
      var m_y = e.pageY - c_y;
      ctx.beginPath();
      ctx.moveTo(m_x,m_y);   //鼠标在画布上的触点

      var imgData = ctx.getImageData(0, 0, cavs.width, cavs.height);  //将每次画完拷贝到数组中
      self.arrImg.push(imgData);
    }

    cavs.onmousemove = function(e){
        if(self.bool){
          ctx.lineTo(e.pageX-c_x, e.pageY-c_y);
          ctx.stroke();
        }
      }

    cavs.onmouseup = function(e){
      self.bool = false;
      ctx.closePath();
    }

    self.color.onchange = function(e){      //设置颜色
      e = e || window.event;
      //console.log(e.target.value)
      ctx.strokeStyle = e.target.value;
    }

    self.clear.onclick = function(){
      ctx.clearRect(0,0,cavs.width,cavs.height)
    }

    self.eraser.onclick = function(){
      ctx.strokeStyle = "#fff";
    }

    self.rescind.onclick = function(){            //撤销的重点难点
      if (self.arrImg.length>0) {
        ctx.putImageData(self.arrImg.pop(),0,0)
      }
    }

    self.weight.onchange = function(e){       //设置线条粗细
      //console.log(e.target.value)
      ctx.lineWidth = e.target.value;     
    }

   }//draw end

}

darwingLineObj.init();

function ID(str) {
return document.getElementById(str);
}

var {
cavs:
this),
color:
this),
clear:
this),
eraser:
this),
rescind:
this),
weight:
this),
bool:
false,
arrImg:[],
//初始化function(){
this.draw();
},
draw:
function(){
varthis.cavs,
self
this,
ctx
);
ctx.lineWidth
;
ctx.lineCap
//线条始终的样式//转弯的圆角var//元素距离左侧的位置//canvas距离顶部

cavs.onmousedown function(e){
e
window.event;
self.bool
true;
var c_x;
var c_y;
ctx.beginPath();
ctx.moveTo(m_x,m_y);
//鼠标在画布上的触点var//将每次画完拷贝到数组中 self.arrImg.push(imgData);
}

cavs.onmousemove function(e){
if(self.bool){
ctx.lineTo(e.pageX
c_y);
ctx.stroke();
}
}

cavs.onmouseup function(e){
self.bool
false;
ctx.closePath();
}

self.color.onchange function//设置颜色 window.event;
//console.log(e.target.value) e.target.value;
}

self.clear.onclick function(){
ctx.clearRect(
,cavs.width,cavs.height)
}

self.eraser.onclick function(){
ctx.strokeStyle
;
}

self.rescind.onclick function//撤销的重点难点if) {
ctx.putImageData(self.arrImg.pop(),
)
}
}

self.weight.onchange function//设置线条粗细//console.log(e.target.value) e.target.value;
}

}//draw end
}

darwingLineObj.init();

 

结语:

  本文还有不足之处, 欢迎大家指正.

声明:

  参考: 渡一教育

 

 

 

    

» 本文来自:前端开发者 » 《canvas的常用功能(电脑版)_莺语_前端开发者》
» 本文链接地址:https://www.rokub.com/73540.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!