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 頁面
<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();
//異次元空間 重置原點(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>
效果圖如下顯示：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
微信小程序module.exports模塊化操作實(shí)例淺析
這篇文章主要介紹了微信小程序module.exports模塊化操作,結(jié)合實(shí)例形式簡單分析了module.exports模塊化的定義與引用相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12
這篇文章主要介紹了簡單分析js中的this的原理,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
寫過JavaScript的都知道,JS中的this相對來講是比較難以捉摸的,尤其在一些復(fù)雜的場景下的指向總是讓人摸不著頭腦,所以這篇文章我們就來系統(tǒng)的學(xué)習(xí)和研究一下this的綁定規(guī)則,需要的朋友可以參考下2024-04-04
用javascript實(shí)現(xiàn)畫圖效果的代碼
用javascript實(shí)現(xiàn)畫圖效果的代碼...2007-07-07
JavaScript網(wǎng)頁禁用屏蔽常用操作小結(jié)
這篇文章主要為大家詳細(xì)介紹了網(wǎng)頁前端常用的JavaScript屏蔽操作,包括網(wǎng)絡(luò)劫持、禁止復(fù)制、禁止按鍵、清除緩存記錄等,有需要的可以了解下2024-11-11
Taro，京東凹凸實(shí)驗(yàn)室出品的適配多端的一個(gè)框架，這篇文章主要介紹了使用taro開發(fā)微信小程序遇到的坑總結(jié),需要的朋友可以參考下2019-04-04
微信小程序?qū)崿F(xiàn)自動播放視頻模仿gif動圖效果實(shí)例
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)自動播放視頻模仿gif動圖效果的相關(guān)資料,通過本文介紹的方法可以實(shí)現(xiàn)自動播放視頻，視頻無控制條無聲音且自動循環(huán)播放,需要的朋友可以參考下2021-07-07
Web系統(tǒng)中，從一個(gè)網(wǎng)頁跳轉(zhuǎn)到另一個(gè)網(wǎng)頁，是LAMP項(xiàng)目中最常用的技術(shù)之一。頁面跳轉(zhuǎn)可能是由于用戶單擊鏈接、按鈕等引發(fā)的，也可能是系統(tǒng)自動產(chǎn)生的。 此處介紹PHP中常用的實(shí)現(xiàn)頁面自動跳轉(zhuǎn)的方法。2015-04-04
通常在開發(fā)測試環(huán)節(jié)，一些資源圖片會出現(xiàn)防盜鏈的錯(cuò)誤提示，本文就通過前端基礎(chǔ)技術(shù)，實(shí)現(xiàn)基本的圖片跨站顯示效果，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
這篇文章主要為大家詳細(xì)介紹了基于Cesium繪制拋物弧線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11