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

純js繪制七巧闆

圖文更新时间:2024-06-29 21:27:24

純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每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

圖文擎天柱有多牛逼
【卡車之家原創】相信很多卡友和小編一樣，對于美系的長頭卡車情有獨鐘，霸氣威武的外觀加上寬敞舒适的休息區域，這些都是美系卡車的一大亮點。不過設計如此優秀的車型，為什麼不引進國内生産銷售呢？想必卡友們比我更想知道其中的原因，今天我們就為大家盤點... 2023-03-19
圖文我是監護人講的什麼
憑借《唐人街探案2》中機靈古怪、飒帥的角色—黑客kiko，尚語賢迅速出圈，赢得了大家的認可。這次，她颠覆過往形象，帶着自己的最新電影《我是監護人》跟大家見面。HB獨家對話尚語賢放下自己，成就角色《我是監護人》是一部聚焦于現實題材有關“原生家... 2023-03-24
圖文莫德裡奇對巴西集錦
歐國聯A1小組最後1輪，奧地利隊将在恩斯特·哈佩爾球場迎戰克羅地亞隊。賽前，前上海海港外援阿瑙托維奇與主教練朗尼克一起出席新聞發布會，他希望球隊能延續首回合在客場戰勝對手的優異表現：“我們在那裡踢得非常好，我們想延續那樣的表現，我們都知道克... 2022-12-24
圖文天蠍座談戀愛是怎麼樣的
#天蠍座肯定有很多人想問，天蠍男喜歡一個人是什麼樣的？其實，天蠍座喜歡一個人，并沒有那麼重要，因為一開始的喜歡，并不能決定最後的結果。天蠍座喜歡一個人，都會有一個很長的考察期，經曆過這個考察期的人，才最終會成為他喜歡的人。如果說，這個天蠍男... 2023-01-26
圖文硬筆書法練字入門點的講解
按書寫工具來分，書法分為傳統的毛筆書法和硬筆書法。毛筆書法在我們的工作或生活中用的比較少，而硬筆書法在實用性和學習群體中規模非常大。今天主要了解硬筆的類型及其特點。在練習書法時，選筆是所有人首先想到的問題。看到一手好字，會想要知道對方用的是... 2022-10-30
圖文世界上最小的笛子怎麼吹
3月14日，韓國峰正在保養2米長的竹笛。趙亮攝中新網唐山3月14日電(白雲水孟潮)14日，在河北省灤州市油榨鎮王官營四村的一座農家小院裡，飄出陣陣優美的竹笛聲，明快流暢的節奏讓人的心情就像這早春的天氣一樣，更加歡快。現年36歲的韓國鋒手持竹... 2022-11-19
圖文養兔子要注意什麼兔子容易養活
養兔子需要注意什麼呢？才能達到肉質鮮嫩，養殖戶注意了！很多小夥伴經常會被兔兔萌萌的外表所吸引，以至于常常下決心要擁有一隻屬于自己的可愛兔兔。那麼無論是飼養兔兔還是飼養别的寵物都是需要掌握一定的方法，除此之外你還需要擁有一顆不離不棄、負責任的... 2022-11-04
圖文朱頂紅怎麼養才能長得茂盛
朱頂紅葉片濃綠秀麗，花朵端莊文雅，開花時紅綠相映成趣，豔麗多姿，非常受人們的喜愛，很适合擺放在家中的陽台、窗台等處觀賞。下面就一起了解一下朱頂紅的養護方法吧！1、生長習性朱頂紅喜溫暖濕潤和有散光的環境中生長，所以在其生長期間，要适當接受一些... 2023-02-16
圖文正宗腌糖蒜的過程
正宗腌糖蒜的過程?飯店的糖蒜原來是這樣腌的，酸甜脆爽，方法簡單，放一年不怕壞說到大蒜大家都不陌生，很常見的一種食材，也是炒家常菜必備的一味調料，南北方菜肴都離不開它，大蒜含豐富營養元素，其中大蒜的辣味主要是由蒜氨酸分解後産生的，雖然口感辣，... 2022-10-08
圖文李小龍與李連傑現在怎樣
李小龍和李連傑是曆史上最具傳奇色彩的銀幕戰士。這兩位功夫電影巨匠走上了截然不同的明星之路，以至于李小龍都沒能活下來。他們的個人經曆和訓練也有很大的不同，但他們有一個重要的共同點：他們可以像其他人一樣踢腿。當然，這回避了一個顯而易見的問題：在... 2023-02-28
圖文天書奇譚皇帝原型
天書奇譚皇帝原型?2021年11月5日，對于很多人來說也許是一個“爺青回”或“爺童回”的日子，下面我們就來說一說關于天書奇譚皇帝原型?我們一起去了解并探讨一下這個問題吧!天書奇譚皇帝原型2021年11月5日，對于很多人來說也許是一個“爺青回... 2022-10-14
圖文冷空氣來襲氣溫降低我省回歸寒冬
來源：中國新聞網中新網北京9月30日電(韋香惠)國慶長假、秋收秋種等時期到來，10月份天氣情況因而尤為重要。29日，中國氣象局舉行10月新聞發布會，具體介紹了國慶假期天氣情況，以及氣象服務提示等内容。強冷空氣席卷全國大部從降雨方面來看，國家... 2022-12-05
圖文航空機票怎麼那麼便宜
專注中國西部旅行，一個有深度有溫度的旅行平台為什麼别人搶的機票都這麼便宜？什麼時候購買機票才是最佳時機？有哪些航空公司的官網，價格比代理還便宜？原來搶機票也藏着這麼多小秘密，今天大美莙就為你一一揭開！1如何訂到特價機票？提早預訂機票國内機票... 2023-02-16
圖文深圳小梧桐山登山路線
梧桐山自西向東漸次崛起，分布着三大主峰，即小梧桐、豆腐頭、大梧桐，史稱“三峰秀拔”。大梧桐海拔943.7米，是深圳最高峰。小編在深圳待了六年多，去梧桐山有十多次，這幾天天氣涼快，計劃去梧桐山露營看雲海，第一次重裝上大梧桐露營，下午5點由泰山... 2022-11-23
圖文拔智齒對腦子不好嗎
近日，河北一女子拔智齒時，牙醫生拉硬拽搖晃近1小時，直接沖上熱搜，吓壞了一衆網友。拔智齒能瘦臉？拔了影響智力和記憶？智齒必須拔，隻是時間早晚問題？千萬别信，這些都是“智齒謠言”！記憶力變差，是“智齒”的名字給了人誤導；臉的形狀，主要由下颌骨... 2023-03-08
圖文沒搞懂之前不要亂說
争位到了新公司，是一字排開的連體桌子，又招來了幾個新同事，引得原來的位置要調一調，擠一擠，騰出點空間給新人。居然有老同事要趕忙鋪上一張桌墊，占住一個地方，大概表達的心裡意思“你們怎麼坐随便，這是我的地方，誰也不要侵犯”。就跟動物世界裡的領地... 2022-12-28
圖文紅會會長陳竺談
紅會會長陳竺談?新京報快訊(記者王姝)29日下午，全國人大常委會分組審議紅十字會法修訂草案，紅十字會的公信力建設成為全國人大常委會委員們的關注熱點之一“一個郭美美事件就使中國紅十字會遭遇困境，教訓是深刻的”，全國人大常委會委員劉政奎說，今天... 2022-11-25
圖文秋冬季可以吃竹筍嗎
秋冬季可以吃竹筍嗎?大家好我是尚姐春天又到了吃竹筍的季節，這東西不易過期，春天家裡多屯點，能吃到冬天，趁現在可以多買點，我來為大家科普一下關于秋冬季可以吃竹筍嗎?以下内容希望對你有幫助!秋冬季可以吃竹筍嗎大家好！我是尚姐。春天又到了吃竹筍的... 2022-12-06
圖文個人使用選擇騰訊雲還是阿裡雲
雲計算是近年發展迅速的朝陽産業，國内企業和站主們在選擇雲計算廠商的時候，阿裡雲與騰訊雲總是兩個被拿來比較的品牌。從阿裡雲騰訊雲的市場現狀來看，阿裡雲能提供服務的區域遍及杭州、青島、北京、深圳、上海、香港、矽谷、新加坡和弗吉尼亞，而騰訊雲則是... 2023-03-23
圖文偏旁部首及代表字一年級
“生活不可能像你想象得那麼好，但也不會像你想象得那麼糟，我覺得人的脆弱和堅強都超乎自己的想象。”前段時間，胡可在《妻子的浪漫旅行》第四季中回憶自己當初因為不好意思和劇組請假延誤了回家的行程，結果錯過了見姥姥最後一面，一直耿耿于懷覺得自己十分... 2022-11-14
圖文巫師3二周目流派
《巫師3》在遊戲通關後，玩家可以保留原存檔進行二周目的遊戲。二周目在遊戲原有基礎上新增了一些内容，不過有不少玩家不知道二周目新增了什麼，下面我們就來看看二周目内容詳解《巫師3》二周目内容詳解：在巫師3中，二周目提升了玩家的等級上限，并且新增... 2022-12-22
圖文被親戚性騷擾事件
被親戚性騷擾事件?23歲的小志，初中沒畢業就到了城裡打工，在同村人的一家美發店當學徒，我來為大家科普一下關于被親戚性騷擾事件?下面希望有你要的答案，我們一起來看看吧!被親戚性騷擾事件123歲的小志，初中沒畢業就到了城裡打工，在同村人的一家美... 2022-10-10
圖文 vivox30拆機圖解
清理灰塵，因為聽筒不好用。沒啥大毛病。正面，鋼化膜破碎手機背面。摳掉上下兩個蓋子。擰開所有螺絲，然後上推後蓋，後蓋就掉了。黑vivo的人我不知道怎麼想的，睜眼說瞎話，vivo雖然配置低，但是一分錢一分貨，做工用料好，手機品質在這裡擺着，做工... 2022-11-16
圖文中晚年生活幸福的生肖
作者：徐道林命理案例：出生于陽曆一九六九年六月十四日淩晨5點，男，生肖雞老師您好！之前我的事業還算順利，但是從去年開始收入就不穩定，所以想請老師幫我看看未來還有财運嗎？徐道林命理解析：出生：己酉年庚午月庚申日己卯時日主綜合：庚金生于午月，但... 2023-02-05
圖文野茶小種與正山小種比較
野茶小種與正山小種比較?說起中國的紅茶鼻祖，不得不提産自福建武夷山的正山小種，我來為大家科普一下關于野茶小種與正山小種比較?下面希望有你要的答案，我們一起來看看吧!野茶小種與正山小種比較說起中國的紅茶鼻祖，不得不提産自福建武夷山的正山小種。... 2022-10-12
圖文王羲之竹林七賢
山東濟南，因為豐富的泉水而被稱為泉城。在距離濟南1000多公裡外的重慶，也有很多泉水，不過它們卻是溫泉。重慶遊品的十七一直很想去濟南看看，幸運的是，總算找到了這樣的機會。濟南有着聞名全國的泉水，自然也就吸引了很多人前往，從古至今，濟南這座城... 2022-11-14
圖文
?微博@武漢發布2月7日發布武漢市場監督管理局通告稱：在當前抗擊新型肺炎疫情的緊要時刻，社會各界及不少個人通過不同途徑踴躍捐贈口罩等醫用防護物質，捐贈對象主要是市紅十字會，但也有定向捐贈給指定醫療機構的情形，我來為大家科普一下關于?下面希望... 2022-12-10
圖文聚合支付系統開發
聚合支付系統開發?核對賬目是商戶保證賬簿記錄的真實性、正确性，對賬簿和賬戶所記錄的有關數據進行核對、檢查的操作本文以金融業務為總出發點，闡述不同場景交易情況下的多角度對賬方式結合實例與大家分享支付對賬的邏輯、流程、賬單和處理方法推薦相關領域... 2022-10-13
圖文鹵乳鴿正宗做法
做法步驟1、準備各種香料2、乳鴿焯水，洗淨去除體内髒物，瀝幹水，喜歡吃頭的可以留着3、香料入袋，米椒不入袋，以便太辣可随時取出4、加調味:鹽、酒、醬油、老抽、冰糖少許前20分鐘中小火焖，乳鴿反面，轉小火焖20分鐘5、乳鴿撈出，剩下的汁煮稠，... 2022-10-22
圖文如何做出寶寶愛吃的蒸雞蛋
如何做出寶寶愛吃的蒸雞蛋?大家好，這裡是楊爸的育兒經，主題介紹簡單的育兒輔食和育兒知識，隻為分享對孩子更好的——本款美食适合3周歲以上的孩子品嘗，下面我們就來說一說關于如何做出寶寶愛吃的蒸雞蛋?我們一起去了解并探讨一下這個問題吧!如何做出寶... 2022-10-15

tft每日頭條

> 圖文

> 純js繪制七巧闆

純js繪制七巧闆

純js繪制七巧闆

相关圖文资讯推荐

热门圖文资讯推荐

网友关注