資訊專欄INFORMATION COLUMN
摘要：畫一條直線后面的會統(tǒng)一使用該樣式，不再重復(fù)貼出代碼這里設(shè)置畫布大小需要在標(biāo)簽里面直接設(shè)置后面的會統(tǒng)一使用該樣式，不再重復(fù)貼出代碼得到得到上下文環(huán)境清除原來的痕跡線條顏色起點終點線條寬度這是最后一步，繪制畫一個矩形設(shè)置填充顏色設(shè)置定
畫一條直線 css
.canvas{
background-color: #8BF0F7;
cursor: pointer;
}
后面的css會統(tǒng)一使用該樣式，不再重復(fù)貼出css代碼html
后面的js會統(tǒng)一使用該樣式，不再重復(fù)貼出css代碼js
let canvas = document.getElementsByClassName("canvas");//得到canvas
let ca=canvas[0]
let gd= ca.getContext("2d");//得到canvas上下文環(huán)境
gd.beginPath();//清除原來的痕跡
gd.strokeStyle="red";//線條顏色
gd.moveTo(100,100);//起點
gd.lineTo(200,200);//終點
gd.lineWidth=50;//線條寬度
gd.stroke();//這是最后一步，繪制
畫一個矩形
let canvas=document.getElementsByClassName("canvas")[0];
let gd = canvas.getContext("2d")
gd.beginPath();
gd.fillStyle="#B1B7B8";//設(shè)置填充顏色
gd.fillRect(50,20,100,50);//設(shè)置定位大?。ㄗ笊蠈捀撸? gd.stroke();
在一個矩形中清空一個矩形，使其透明
let canvas=document.getElementsByClassName("canvas")[0];
let gd = canvas.getContext("2d")
gd.beginPath();
gd.fillStyle="#149794"
gd.fillRect(20,20,150,150);
gd.clearRect(40,40,50,50);
gd.stroke();
這里理解為，在canvas畫布中，畫了一個150150的矩形A，在這個矩形中又繪制了一個5050的clear矩形B，這個B會畫一條曲線
清除A中的那一塊區(qū)域，使B這一區(qū)域變得透明，從而顯示了畫布的淺藍色,并不是全部層透明
使用arc方法，比較簡單易懂，
let canvas=document.getElementsByClassName("canvas")[0];
let gd = canvas.getContext("2d");
gd.beginPath();
gd.strokeStyle="#3C5AF2"
gd.arc(100,100,50,0,90/180*Math.PI);
//參數(shù)：圓心x坐標(biāo)，圓心y，半徑，開始角度，結(jié)束角度（2*Math.PI是整圓）
gd.stroke();
以下使用arc方法繪制餅圖
使用arcTo
let canvas=document.getElementsByClassName("canvas")[0];
let gd = canvas.getContext("2d")
gd.beginPath();
gd.strokeStyle="red"
gd.moveTo(20,20)
gd.arcTo(200,40,200,170,100)
gd.lineTo(200,170)
gd.stroke();
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110005.html
摘要：不同的線條樣式這里獲取節(jié)點我采用的自帶的，即在加入屬性，不熟悉的朋友可以使用上一篇文章的不同的兩條線交合處的拐彎樣式圓角平角尖角構(gòu)圖陰影陰影顏色軸上偏移量，負數(shù)為相反方向軸上偏移量，模糊的像素值，則不模糊漸變相當(dāng)于一條漸變線起始顏色 不同的lineCap（線條樣式） let gd=this.$refs.canvas.getContext(2d) ...
摘要：游戲開發(fā)實戰(zhàn)主要講解使用來開發(fā)和設(shè)計各類常見游戲的思路和技巧，在介紹相關(guān)特性的同時，還通過游戲開發(fā)實例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。HTML5 Canvas游戲開發(fā)實戰(zhàn)主要講解使用HTML5 Canvas來開發(fā)和設(shè)計各類常見游戲的思路和技巧，在介紹HTML5 Canvas相關(guān)特性的同時，還通過游戲開發(fā)實例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。在本書...
摘要：所以在此次開發(fā)中，嘗試了小步快跑快速迭代的方法。開發(fā)，不僅是在開發(fā)運用上的提升，還是一個開源項目的完整實踐。由于時間原因，在開發(fā)完基礎(chǔ)版本后就去做別的項目。所以，好的文檔是項目的開門鑰匙。兩個項目相輔相成。 showImg(https://segmentfault.com/img/bVba47g?w=900&h=150); 歡迎交換友鏈： laker.me--進擊的程序媛Github：...
閱讀 510·2023-04-25 17:26
閱讀 1526·2021-08-05 09:58
閱讀 1989·2019-08-30 13:17
閱讀 978·2019-08-28 17:52
閱讀 1088·2019-08-26 18:27
閱讀 1438·2019-08-26 14:05
閱讀 3646·2019-08-26 14:05
閱讀 1621·2019-08-26 10:45
