快捷導(dǎo)航

JavaScript?canvas?實現(xiàn)用代碼畫畫

更新時間：2022年11月03日 11:09:24 作者：棠tang

這篇文章主要為大家介紹了JavaScript?canvas?實現(xiàn)用代碼畫畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

canvas是HTML的一個繪圖標簽，與SVG用標簽繪圖不同，canvas是通過Js代碼進行圖形繪制，多用于移動端分享海報繪制以及照片裁剪等場景。本文將結(jié)合部分canvas API介紹在Vue項目中如何使用canvas進行簡單的圖形繪制和圖片繪制。

第一部分：圖形繪制

畫畫第一步：準備好畫布和畫筆

<templete>
  <div>
    <canvas id="my-canvas" width="400" height="400">
    //注意：給canvas設(shè)置寬高是不用帶單位的，以像素為單位
  </div>
</templete>
<script>
export default {
  mounted() {//注意要在DOM元素渲染完后才能操作DOM
    this.draw();
  },
  methods: {
    draw() {
      let canvas = document.getElementById('my-canvas');//獲取畫布
      let ctx = canvas.getContext('2d');//獲取畫筆
      //之后的操作都是基于ctx
}
</script>

畫畫第二步：給畫筆調(diào)個粗細

ctx.fill();//用粗的毛筆填充
ctx.stroke()；//用細的鉛筆描邊

畫畫第三步：給畫筆沾點顏料

ctx.fillStyle = 'red'
ctx.strokrStyle = 'blue'

畫畫第四步：描點畫圖

為了更好理解，把第二三步置前，實際繪制需先描點，最后選擇呈現(xiàn)顏色和方式

描點多借助（x,y）坐標實現(xiàn)，而坐標原點是canvas的左頂點，向右和向下方向分別為x軸和y軸的正方向

（1）畫一個三角形

先描3個點，然后把點連接起來就完事！

ctx.beginPath();//新建一條繪制路徑
ctx.moveTo(10, 10);//起點
ctx.lineTo(60, 10);//向x軸延申10個像素
ctx.lineTo(60, 60);//向y軸延申10個像素
ctx.closePath();//關(guān)閉當(dāng)前路徑
ctx.strokeStyle = 'red';//設(shè)置畫筆顏色
ctx.stroke();//以描邊的方式把描點的位置鏈接起來
//填充方式畫三角形
//ctx.fillStyle = 'blue';//設(shè)置顏色
//ctx.fill();//以填充的方式把描點的位置鏈接起來

效果如下圖

（2）畫一個矩形

如何快速畫出一個矩形？先繪制4個點嗎？大漏特漏?。?！canvas API里直接就有畫矩形的方法！一步到位，無需其他操作！

fillRect(x,y,width,height);//填充一個矩形
strokeRect(x,y,width,height);//描邊一個矩形
//參數(shù)x,y是起點
//例子
ctx.fillRect(10,10,50,50);//填充一個矩形
ctx.strokeRect(70,10,50,50);//描邊一個矩形
//默認顏色為黑色，可通過fillStyle/strokeStyle改顏色

（3）畫一個圓

arc(x, y, r, startAngle, endAngle, direction)
//x,y為圓心，r為半徑，startAngle、endAngle分別代表開始角度和結(jié)束角度，direction代表方向，true為順時針，false為逆時針，不填默認為true
//例子
ctx.arc(100,100,20,0,2*Math.PI);
ctx.stroke();//以描邊方式將點連接起來

（4）進階：畫一個笑臉

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
ctx.moveTo(135, 100);//重新設(shè)置畫筆起點
ctx.arc(100, 100, 35, 0, Math.PI, false);
ctx.moveTo(90, 85);
ctx.arc(85, 85, 5, 0, 2 * Math.PI, true);
ctx.moveTo(120, 85);
ctx.arc(115, 85, 5, 0, 2 * Math.PI, true);
ctx.stroke();

畫畫第五步：署名

如何在canvas畫布上寫字呢？

fillText('文本',x,y,maxWidth);//x,y為文本繪制開始位置，maxWidth為最大寬度（可選參數(shù)）
strokeText('文本',x,y,maxWidth);
font ='';//設(shè)置字體大小和字體樣式 
//例子
ctx.font = '32px serif'
ctx.fillText('任嘉倫最帥',10,50)
ctx.strokeText('任國超也帥',10,100)

第二部分：圖片繪制

場景一：頁面中現(xiàn)有一張圖，需要你在canvas畫布上繪制出一張一模一樣的圖

ctx.drawImage(image, x, y,width,height)//image可以是img元素或Image構(gòu)造函數(shù)創(chuàng)建的屏幕外圖片對象，x,y為繪制的起始位置

//場景一
<template>
  <div class="wrap-box">
    <div class="canvas-content">
      <canvas id="my-canvas" width="300" height="300"></canvas>
    </div>
    <div class="img-content">
      <img src="../../assets/rjl.jpg" alt="" class="my-img">
    </div>
  </div>
</template>
<script>
export default {
  mounted(){
    this.drawPic()
  },
  methods:{
    drawPic(){
      //場景一
      let canvas = document.getElementById("my-canvas");
      let ctx = canvas.getContext('2d');
      let img = document.querySelector('.my-img');
      img.onload=function(){//為確保圖片資源加載完畢，需要在onload方法里繪制
        ctx.drawImage(img,0,0,200,300);
      }
    }
  }
}
</script>
<style scoped>
.wrap-box{
  display: flex;
  align-items: center;
  padding:20px 0 0 50px;
}
#my-canvas{
  border: 1px solid orange;
}
.img-content{
  flex: 1;
}
.my-img{
  width: 200px;
  height: 300px;
}
</style>

場景二：圖片不存在頁面上，通過接口返回或fileReader對象獲取到src路徑參數(shù)，如何把src指向的圖片資源繪制到canvas上？

//場景二關(guān)鍵代碼
<script>
export default {
  mounted(){
    this.drawPic()
  },
  methods:{
    drawPic(){
      //場景二
      let img = new Image();//創(chuàng)建一個Image對象
      img.src="xxx.png";//假設(shè)xxx.png是獲取的scr參數(shù)
      img.onload = function(){//切記要在onload方法里繪制
        ctx.drawImage(img,150,100,200,300);
      }
    }
  }
}
</script>

以上就是JavaScript canvas 實現(xiàn)用代碼畫畫的詳細內(nèi)容，更多關(guān)于JavaScript canvas 畫畫的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: