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