Canvas學習記錄繪製七巧板(01)

阿新 • • 發佈：2021-01-09

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #canvas {
            border: 1px solid #000; 

            display: block;
            margin: 50px auto
        }
    </style>
</head>
<body>

<canvas id="canvas">
    您的瀏覽器不支援 HTML5 canvas 標籤,換個瀏覽器試試.
</canvas>

<script>
    window.onload = () => {
        //獲取canvas標籤
        var canvas = document.getElementById 
('canvas');

        canvas.width = 800; //設定canvas寬度
        canvas.height = 800;//設定canvas高度
        //獲取canvas上下文內容
        var context = canvas.getContext('2d');

        //每個點座標值集合
        let params = [
            {path: [{x: 100, y: 100}, {x: 400, y: 100}, {x: 250, y: 250}], color: "#fe665b"},
            { 
path: [{x: 100, y: 100}, {x: 100, y: 400}, {x: 250, y: 250}], color: "#03a697"},
            {path: [{x: 400, y: 100}, {x: 325, y: 175}, {x: 325, y: 325}, {x: 400, y: 250}], color: "#ec3c60"},
            {path: [{x: 400, y: 250}, {x: 250, y: 400}, {x: 400, y: 400}], color: "#f6ca2d"},
            {path: [{x: 250, y: 250}, {x: 325, y: 325}, {x: 325, y: 175}], color: "#f6f020"},
            {path: [{x: 100, y: 400}, {x: 250, y: 400}, {x: 175, y: 325}], color: "#f094c5"},
            {path: [{x: 250, y: 250}, {x: 175, y: 325}, {x: 250, y: 400}, {x: 325, y: 325}], color: "#a796c2"},
        ];
        //遍歷最外層
        for (let i = 0; i < params.length; i++) {
            draw(params[i], context);
        }

    }

    function draw(data, cxt) {

        cxt.beginPath(); //開始繪製

        cxt.moveTo(data.path[0].x, data.path[0].y);//移動畫筆

        for (let j = 0; j < data.path.length; j++) {
            cxt.lineTo(data.path[j].x, data.path[j].y); //新增一個新的座標點 （該方法並不會建立線條）
            cxt.fillStyle = data.color; //設定圖形填充的顏色

        }
        cxt.closePath();//結束繪製  //儲存每一個圖形的狀態
        cxt.fill(); //設定樣式為填充模式

        cxt.strokeStyle = '#000'; //設定線條顏色
        cxt.lineWidth = 2;//設定線條寬度
        cxt.stroke(); //方法會實際地繪製出通過 moveTo() 和 lineTo() 方法定義的路徑
    }
</script>
</body>
</html>

效果圖:
在這裡插入圖片描述

Canvas學習記錄繪製七巧板(01)

技術標籤：canvascanvasjs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

"利用python進行資料分析"學習記錄01

"利用python進行資料分析"學習記錄 --day0108/02 與書相關的資料在 http://github.com/wesm/pydata-book

核心模組學習記錄01：ELF檔案的解析

模組ELF的解析本系列主要保留本人在學習核心模組（2.6.24）部分的一些文字材料，涉及的內容主要包括：

組合語言學習記錄01丨開發工具安裝及編譯執行第一個程式

組合語言開發工具安裝首先安裝VS Code（建議下載最新版，否則有可能會與的下面拓展版本不相容）

【canvas】繪製七巧板

效果圖: 程式碼： <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

vue學習記錄-01 vue初體驗

技術標籤：Vue學習記錄vuejavascriptvue.jshtml vue學習記錄-01 vue初體驗這篇文章是根據codewhy老師在b站的視訊進行的學習記錄

2021-01-21學習記錄 || JButton與JLabel的相關方法

技術標籤：2021寒假記錄java 廢話不多說，直接進正題。今天學的是一些按鍵和圖片匯入的操作，分別要用到JButton類與JLabel類的一些相關方法，下面來做一下總結。

2021-01-23、24學習記錄 || 2048小遊戲的實現程式碼

技術標籤：2021寒假記錄java 由於離散老師放假了還不放過我們，本來昨天就應該完成的事拖到了今天現在，經過今天數個小時的學習和實踐，2048小遊戲成功製作完成，明天就可以把這個給妹妹玩。太累了，今天先把程

webpack學習記錄

本章內容： webpack是什麼為什麼要使用webpack 怎麼配置webpack 如何使用webpack命令 1. webpack是什麼？

laravel框架學習記錄之表單操作詳解

本文例項講述了laravel框架學習記錄之表單操作。分享給大家供大家參考，具體如下：

SpringBoot學習記錄（十四）-------- Spring Boot整合Redis開發：模擬高併發秒殺活動

秒殺業務流程使用者點選商品列表頁中的商品，進入商品詳情頁，如果秒殺成功，則跳轉訂單詳情頁。瞬間的併發非常大，系統很可能出現問題，瓶頸在資料庫（加快取，非同步化來減輕資料庫壓力，防止直接穿透到資料庫

redis操作學習記錄

本文例項總結了redis操作。分享給大家供大家參考，具體如下：相關內容：雖然有參考文件，而且記憶太多也是耗腦，但學習的時候還是想要有個系統劃分開知識點的文件，即使不要求去細緻記憶，但劃分開知識塊後腦子裡的

JavaScript Date物件功能與用法學習記錄

本文例項講述了JavaScript Date物件功能與用法。分享給大家供大家參考，具體如下：

【機器學習】決策樹-01

心得體會： #3-1構造決策樹 #計算夏農熵 from math import log def calcShannonEnt(dataSet): numEntries=len(dataSet)

vue學習記錄1

一、通過腳手架安裝建立vue專案 1、安裝vue腳手架 npm install -g @vue/cli 2、通過命令 vue create 專案名稱來建立vue基礎專案

DP學習記錄Ⅱ

DP學習記錄Ⅰ 以下為 DP 的優化。人腦優化DP P5664 Emiya 家今天的飯正難則反。考慮計算不合法方案。一個方案不合法一定存在一個主食，使得該主食在多於一半的方法中出現。

DP學習記錄Ⅰ

DP學習記錄Ⅱ 前言狀態定義，轉移方程，邊界處理，這三部分想好了，就問題不大了。重點在狀態定義，轉移方程是基於狀態定義的，邊界處理是方便轉移方程的開始的。因此最好先在紙上寫出自己狀態的意義，越詳細越好（

Linux Shell 學習記錄

開頭先指定路徑包含shell命令直譯器通常有幾種寫法： #!/bin/bash　　　　#!/usr/bin/bash#!/bin/sh　　　#!/usr/bin/sh

GitlabCI/CD 學習記錄 - .gitlab-ci.yml

一、關鍵字介紹 script#由Runner執行的Shell指令碼。 image#使用docker映象，image：name

ASP.NET Core 3.x RESTful API學習記錄--輸入驗證：IValidatableObject

需要驗證的Dto模型繼承於IValidatableObject public class ValidatableMovie : IValidatableObject

Canvas學習記錄繪製七巧板(01)

相關推薦