js繪制一條直線并旋轉(zhuǎn)45度
更新時(shí)間：2020年08月21日 09:08:47 作者：yangying_0220
這篇文章主要為大家詳細(xì)介紹了js繪制一條直線并旋轉(zhuǎn)45度，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js繪制一條直線并旋轉(zhuǎn)45度的具體代碼，供大家參考，具體內(nèi)容如下
繪制一條直線，并旋轉(zhuǎn)45度
html 頁(yè)面
<canvas id="canvas" width="300" height="300" style="background-color: orange;"></canvas>
js頁(yè)面
<script>
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext('2d');
cxt.lineWidth = 5;
cxt.beginPath();
cxt.moveTo(20, 20);
cxt.lineTo(180, 20)
cxt.stroke();
cxt.closePath();
//設(shè)置異次元空間
cxt.save();
//異次元空間 重置原點(diǎn),默認(rèn)是畫布的(0,0)點(diǎn)
cxt.translate(20, 20);
//設(shè)置旋轉(zhuǎn)角度 參數(shù)時(shí)弧度 角度0--360 弧度=角度*Math.PI/180
cxt.rotate(-30 * Math.PI / 180);
//旋轉(zhuǎn)一個(gè)線段
cxt.lineWidth = 5;
cxt.beginPath();
cxt.moveTo(0, 0);
cxt.lineTo(20, 180);
cxt.stroke();
cxt.closePath();
//將旋轉(zhuǎn)之后的元素返回原畫布
cxt.restore();
</script>
效果圖如下顯示：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Openlayers實(shí)現(xiàn)圖形繪制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
js實(shí)現(xiàn)axios限制請(qǐng)求隊(duì)列
本文主要介紹了js實(shí)現(xiàn)axios限制請(qǐng)求隊(duì)列，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
Javascript實(shí)現(xiàn)滾動(dòng)圖片新聞的實(shí)例代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)滾動(dòng)圖片新聞的實(shí)例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
JavaScript統(tǒng)計(jì)字符串中每個(gè)字符出現(xiàn)次數(shù)完整實(shí)例
這篇文章主要介紹了JavaScript統(tǒng)計(jì)字符串中每個(gè)字符出現(xiàn)次數(shù)的方法,以完整實(shí)例形式分析了JavaScript針對(duì)字符串中字符的遍歷操作相關(guān)技巧,需要的朋友可以參考下2016-01-01
標(biāo)準(zhǔn)的js無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了標(biāo)準(zhǔn)的js無(wú)縫滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了javascript密碼強(qiáng)度校驗(yàn)的實(shí)現(xiàn)方法，并給出了詳細(xì)代碼，需要的朋友可以參考下2015-11-11
js實(shí)現(xiàn)form自動(dòng)完成功能
2008-02-02
這篇文章主要為大家詳細(xì)介紹了JS+Canvas繪制抽獎(jiǎng)轉(zhuǎn)盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
省市選擇的簡(jiǎn)單實(shí)現(xiàn)(基于zepto.js)
下面小編就為大家?guī)?lái)一篇省市選擇的簡(jiǎn)單實(shí)現(xiàn)(基于zepto.js)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨想過(guò)來(lái)看看吧2016-06-06
Web跨域已是老生常談的話題，這次來(lái)嘗試下跨域?yàn)g覽器進(jìn)程之間的通信 —— 這在過(guò)去基本依靠網(wǎng)絡(luò)中轉(zhuǎn)實(shí)現(xiàn)2013-04-04