純js繪制七巧闆-tft每日頭條

純js繪制七巧闆

圖文更新时间:2024-11-28 19:24:21

純js繪制七巧闆?前幾天小編有事,所以頭條一直沒有更, 所以今天補下，今天小編就來說說關于純js繪制七巧闆?下面更多詳細答案一起來看看吧!

純js繪制七巧闆

前幾天小編有事,所以頭條一直沒有更, 所以今天補下

這次用的是h5裡面的畫布就是canvas進行的繪制,這個也是考驗的js能力

話不多說了下面開始介紹幾個需要用到的知識

首先是關于坐标的隻是

關于坐标點的

從0,0,開始如果是向左那麼x軸改變坐标大小,y軸則保持不變

從0,0開始如果是向下,那麼y軸改變左邊哦大小,x軸保持不變

下面是幾個方法

xx.moveTo(x,y)//線條開始

xx.lineTo(x,y)//線條結束

xx.beginPath//變成單獨的一個區域開始

xx.closePath//結束如果設置了等于結束這個畫布

xx.lineWidth//線條的寬度

xx.stroKeStyle//線條的顔色

xx.fillStyle//背景色

xx.stroke//繪制線條

xx.fill//繪制背景色

以上這些方法是基本的繪制方法

首先看下html布局

</div>

css樣式

<style>

.aa{margin: 0 auto;width: 960px;}

</style>

最後看下js的代碼

可能有的同學想到了不就7個圖形嗎,來上7個區域,用鼠标事件挨個獲取坐标,然後畫出7個圖形

這樣是可以,但是太笨了。

所以首先我們可以把這些都放到一個數組裡面到時候遍曆就翻遍很多了

var tangram=[

{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},

{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#67becf'},

{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'},

{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},

{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},

{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},

{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'}

]

var canvas=document.getElementById('canvas');

canvas.width=800;

canvas.height=800;

獲取下id 定義畫布的大小

var ConText=canvas.getContext('2d');

for(var i=0;i<tangram.length;i ){

draw(tangram[i],ConText);

}

循環整個數組,都存到方法裡

function draw(pie,cont){

cont.beginPath();

cont.moveTo(pie.p[0].x,pie.p[0].y);

for(var i=0;i<pie.p.length;i ){

cont.lineTo(pie.p[i].x,pie.p[i].y);

}

draw方法有兩個參數分别對應上面for循環裡面的,循環裡面的第i個

cont.closePath();

cont.fillStyle= pie.color;

cont.fill();

cont.lineWidth=3;

cont.strokeStyle='black';

cont.stroke();

上面的都懂什麼意思了就不說了

看下完成後的圖

七巧闆

下面是完整的代碼

<!DOCTYPE html>

<html>

<head>

<style>

.aa{margin: 0 auto;width: 960px;}

</style>

</head>

<body>

<div>

</div>

var tangram=[

{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},

{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#67becf'},

{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'},

{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},

{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},

{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},

{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'}

]

window.onload= function () {

var canvas=document.getElementById('canvas');

canvas.width=800;

canvas.height=800;

var ConText=canvas.getContext('2d');

for(var i=0;i<tangram.length;i ){

draw(tangram[i],ConText);

}

function draw(pie,cont){

cont.beginPath();

cont.moveTo(pie.p[0].x,pie.p[0].y);

for(var i=0;i<pie.p.length;i ){

cont.lineTo(pie.p[i].x,pie.p[i].y);

}

cont.closePath();

cont.fillStyle= pie.color;

cont.fill();

cont.lineWidth=3;

cont.strokeStyle='black';

cont.stroke();

}

</script>

</body>

</html>

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

圖文帶有六的6字成語
帶有六的6字成語?見過四個字的成語，見過五個字的成語，你見過六個字的成語嗎？，下面我們就來說一說關于帶有六的6字成語?我們一起去了解并探讨一下這個問題吧!帶有六的6字成語見過四個字的成語，見過五個字的成語，你見過六個字的成語嗎？風馬牛不相及... 2022-10-07
圖文 edg在lck戰績
edg在lck戰績?随着EDG突破LCK的包圍圈，擊潰EDG奪得S11全球總決賽的冠軍以後英雄聯盟S11賽季，就逐漸落下了帷幕剩下的一個多月的時間裡面，就隻剩下全明星賽和各賽區的杯賽助興了，接下來我們就來聊聊關于edg在lck戰績?以下内容... 2022-10-18
圖文蘋果三星折疊屏7.2寸
三星GalaxyFold如無意外會是全球首款量産的折疊屏，但沒想到416體驗活動開始後陸續有許多媒體表示三星GalaxyFold體驗機存在問題，問題包括但不限于：左邊屏幕失靈閃屏，半邊屏幕無顯示，屏幕中間鉸鍊處出現損毀，屏幕出現壞線等等。對... 2022-10-29
圖文什麼口罩能真正防塵
防粉塵最好的口罩有哪些？哪些口罩防塵效果最好？目前市面上的防塵口罩種類繁多，五花八門，這導緻我們在選購防塵口罩時猶豫不決，不知道該買哪種好，伸萬小編整理了以下幾種品牌：3M、Honeywell霍尼韋爾、Lakeland雷克蘭、MSA梅思安、... 2022-09-29
圖文 4.5米魚竿推薦一下
4.5米魚竿推薦一下?現在不少品牌也生産出4米8尺寸的魚竿，，現在小編就來說說關于4.5米魚竿推薦一下?下面内容希望能幫助到你，我們來一起看看吧!4.5米魚竿推薦一下現在不少品牌也生産出4米8尺寸的魚竿，那麼，有釣友會問：4米8魚竿實用嗎？... 2022-10-09
圖文沒孔的花盆能養花
有些經驗豐富的花友說，如果溫度很高，可以在花盆外邊再套個盆，花兒高溫的時候不容易死，這是什麼原因呢？原來很多養花大神都會這麼幹，套盆的作用原來還不止這個，一起來看看吧！「花兒套盆」-利于花卉度夏-給花兒套個盆，可以保護花卉根系，利于度夏。如... 2022-11-06
圖文約會大作戰四糸乃喜歡誰
在《約會大作戰》中，四糸乃與七罪算是關系最為要好的一對精靈妹子，她們倆同時也是士道後宮中的CP代表，一般我們說到CP，第一時間内想到便是她們。而鑒于四糸乃與七罪的情誼，約戰圈内也催生出了專推她們的四七黨。說起四糸乃與七罪，她們最早結識于七罪... 2023-03-18
圖文堅持擴胸運動多久能豐胸
堅持擴胸運動多久能豐胸?“從小喝到大”是假,吃啥豐胸才是真?，下面我們就來說一說關于堅持擴胸運動多久能豐胸?我們一起去了解并探讨一下這個問題吧!堅持擴胸運動多久能豐胸“從小喝到大”是假,吃啥豐胸才是真?椰樹椰汁不僅口味受消費者歡迎,它神奇的... 2022-10-14
圖文賈寶玉秦可卿出家
賈寶玉那一日在甯國府遊玩，想要午睡。秦可卿作為尤氏兒媳婦，當然要負責安排小叔叔休息的事，責無旁貸帶着寶玉去準備好的房間休息。不想賈寶玉看到房中勸學的《燃藜圖》堅決不睡，給秦可卿出了不小的難題。甯國府雖大，倉促間怎麼能再收拾一間合适的房間給他... 2022-10-31
圖文易烊千玺演講未來十年語錄
楚天都市報5月7日訊（記者李碗容通訊員孫夢圓）“未來十年，在世界舞台上，中國将擔當起更重要的角色，而我們年輕一代，将是這個角色裡的重要力量”5月4日晚，青年演員、歌手易烊千玺在“向上的力量——未來十年”大型主題演講盛典上的演講内容在北京衛視... 2023-02-20
圖文汪倫寫的詩都有哪些
許多原本名不見經傳的“小人物”，因為出現在知名詩句中，而名垂千古，毫無疑問典型中的典型就是汪倫。那除了汪倫，你還能說出哪些因為著名詩句而流傳千古的小人物？本文就分享其中最典型的12位，看看能不能引起大家的共鳴。第1位汪倫唐朝李白《贈汪倫》李... 2022-11-11
圖文流體靜力學基本方程推導過程
記得老師在講工程力學的時候，一個很簡單的力學模型，物體在X方向分别收到兩個相同小的力（如圖1），這時候物體所受的F合=0。圖1圖1站在數學的角度考慮，這是毋庸置疑的。後來畢業了，有一天，我很“榮幸”的加入了工程制造大軍，并且一路南征北戰，疲... 2022-11-12
圖文 saas電商分析
電商SaaS行業發展曆程及發展機遇前景、競争格局、市場規模1、電商SaaS行業發展曆程電商SaaS是目前中國最大的行業垂直型SaaS細分行業。電商SaaS本質為電商服務業，為電商商家提供經營管理所需軟件及服務。目前電商SaaS涵蓋了電子商務... 2022-11-03
圖文根管治療後的牙套區别
根管治療後的牙套區别?糾正一大誤區經常有類似下圖照片的患者找我治牙，總以為燙掉膿頭就好其實不然，此病叫根尖周炎通俗講是牙根周圍骨頭化膿後，膿液突破骨頭和牙龈，排出形成的（照片來自教材，口腔雖隻是面部小部分，但保護患者隐私，是醫生必須恪守的職... 2022-10-15
圖文東京奧運會賽程男子乒乓球
乒迷粉在今日頭條集結，關注作者，您将成為國乒八千萬迷粉中的一員!陪國乒戰東京，熟悉2020東京奧運會乒乓球項目參賽資格和規則十分重要，為了更好地給國乒提供第一手資料，利用半個多月的時間進行了廣泛的收集和整理。東京奧運會乒乓球運動項目既有與裡... 2022-11-16
圖文家用空調怎麼選看完你就知道啦
家用空調怎麼選看完你就知道啦?花這麼多的錢可不得選一台倍兒好的空調，下面我們就來聊聊關于家用空調怎麼選看完你就知道啦?接下來我們就一起去了解一下吧!家用空調怎麼選看完你就知道啦花這麼多的錢可不得選一台倍兒好的空調！可市場上空調品牌種類繁多，... 2022-10-11
圖文哪吒可動手辦測評
哪吒可動手辦測評?為慶祝拓麻歌子25周年，萬代推出智能手表樣式的TamagotchiSmart在外觀上，該産品變得更現代，加入觸控屏幕和聲音控制的能力、支持早前推出的TamaSma擴充卡隐私保護方面，根據TamagotchiSmart日語版... 2022-10-12
圖文湖北長江大堤荊州段
湖北長江大堤荊州段?來源：中國經濟網落日餘晖下，荊江輪渡緩緩靠岸中國經濟網劉其瑜攝，今天小編就來聊一聊關于湖北長江大堤荊州段?接下來我們就一起去研究一下吧!湖北長江大堤荊州段來源：中國經濟網落日餘晖下，荊江輪渡緩緩靠岸。中國經濟網劉其瑜攝中... 2022-10-13
圖文空氣炸鍋豆腐做法簡單又好吃
一個秋天長肉肉太多，用空氣炸鍋炸了點豆腐，卷個雜糧煎餅，來點佐料～美的很By恰好照進我心房❀用料北豆腐半塊醬油少許蚝油少許小米辣4個香菜一根米醋少許勺做法步驟1、北豆腐切成方塊，放水裡浸泡一會2、撈出放入空氣炸鍋，忘了拍圖了200度，12分... 2022-10-21
圖文消防防火窗檢測
防火窗消防産品認證，即防火窗消防産品自願性認證，屬于自願性消防産品認證範圍，是火災防護産品消防認證的一部分，通常包括鋼質隔熱防火窗、木質隔熱防火窗、鋼木複合隔熱防火窗、其他材質隔熱防火窗等産品類别。根據防火窗消防認證規範GB16809-20... 2023-01-16
圖文曾志偉藍潔瑛事件他怎麼回應
說道“藍潔瑛事件”事件，大家都知道這件事被埋沒了許久，而就在前幾天，作為中國第一狗仔——卓偉竟然把這件事翻出來，指明曾志偉就是當年侵犯者之一！曾志偉也在第一時間發表聲明。可是沒多久，一位模特界的老前輩韓穎華卻開始實錘曾志偉，稱曾志偉“他又不... 2022-11-05
圖文農村大齡男青年單身原因
農村大齡男青年單身原因?其實，光棍的定義也沒有标準答案比如廣東地區男人35歲，或者四十多歲結婚的，比比皆是但對于安徽地區的男人來講，答案又有了标準，安徽男人通常23歲還沒有結婚的，他的父母會挖空心思想辦法，比如找媒婆，或者找親友幫忙提親總而... 2022-09-30
圖文初一下學期尺規作圖練習題
關注“中考數學當百荟”，感謝您的支持！題目如圖1，給定正方形ABCD及正方形AB邊上一點E，求作：△EBF，使其周長等于正方形ABCD的邊長a，且點F在BC邊上.圖1作法I(如圖2)步驟1在CB邊上截取CM=EB，步驟2連接EM，步驟3作E... 2022-11-06
圖文自助建站平台收費嗎
前文已經全面評估過企業網站建設費用的組成，我們将調查結果彙總成為一張圖，其内容雖然非常全面，但是仍然不能讓企業直觀的判斷“我準備買的這個建站靠不靠譜”。從本文開始，就針對各種建站套餐進行更加直觀的分析。查看前文《一圖看懂企業建設網站應該花多... 2022-11-27
圖文攝影師一等獎
錢江晚報·小時新聞記者邊程壹通訊員章潔你如果退休了，退休生活會是怎樣？這個問題的答案，因人而異。有人會與好友打麻将享受快樂，也有人會重拾年輕時的愛好，還有人索性就在家帶孫輩。而今年81歲的姚建心沒有給人生設限，20年前退休後他接觸了相機，從... 2022-12-10
圖文荊州北擴區規劃
荊州北擴區規劃?今年以來，國家層面已經多次表态，嚴控撤縣設市設區從字面上理解“嚴控”，就是嚴格控制，說直白一點就是，再想撤縣（市）設區，難度已經非常大了，對于絕大多數城市而言，基本是不可能了，我來為大家科普一下關于荊州北擴區規劃?以下内容希... 2022-10-13
圖文最是滄海留不住小說全文
最是滄海留不住小說全文?作者：香檬兒花辭樹吟唱起《詩經•野有蔓草》，婉兮靜靜聽着他們就這樣一路走上山去，我來為大家科普一下關于最是滄海留不住小說全文?下面希望有你要的答案，我們一起來看看吧!最是滄海留不住小說全文作者：香檬兒花辭樹吟唱起《詩... 2022-10-12
圖文 18個笑死人的笑話
18個笑死人的笑話?1.有一次，爸爸喝了酒，給了我一百塊錢讓我去買煙，但是商店沒有賣，我就偷偷花了一塊錢買了一根棒棒糖，回家騙爸爸掉了一塊錢，爸爸想了一會，我正因為把我爸爸信了的時候，他突然給了我一巴掌[吐血]，今天小編就來聊一聊關于18個... 2022-11-05
圖文上海浦東機場擴建情況
上海浦東機場擴建情況?2021年7月8日，記者從上海市政府新聞發布會上獲悉，“十四五”期間上海将着力提高空港地面設施與集疏運保障能力，推進浦東機場四期擴建工程，新建浦東機場T3航站樓；對标香港機場超級貨站，針對航空物流冷鍊，跨境等新業态需要... 2022-10-14
圖文王振偉事迹
王振偉事迹?近日，小編有幸從知名媒體人樊起臣處獲悉，據了解，王振偉，男，漢族，1984年9月9日（農曆）出生于吉林長春榆樹農村，天秤座，AB血型，自幼家境貧寒，喜歡品茶，深度自駕遊等社會活動曾就讀于吉林大學，主要從事中國運營以及進出口貿易職... 2022-10-04

tft每日頭條

> 圖文

> 純js繪制七巧闆

純js繪制七巧闆

純js繪制七巧闆

相关圖文资讯推荐

热门圖文资讯推荐

网友关注