3.標簽篇:canvas

来源:https://www.cnblogs.com/lanshanxiao/archive/2020/05/26/12969545.html
-Advertisement-
Play Games

# 3.標簽篇:canvas - 1. 語義化標簽 都是塊盒 <header></header>:頁頭 <footer></footer>:頁腳 <nav></nav>:導航 <article></article>:用於文章,可以直接被引用拿走的 <section></section>:用於段落 < ...


# 3.標簽篇:canvas

  - 1. 語義化標簽 都是塊盒 <header></header>:頁頭 <footer></footer>:頁腳 <nav></nav>:導航   <article></article>:用於文章,可以直接被引用拿走的 <section></section>:用於段落   <aside></aside>:側邊欄   - 2. canvas   <canvas></canvas> ```html <style>     #can{         width:500px;         height:300px;         border:1px solid black;     } </style> <!--canvas的大小要在行間樣式上寫width和height--> <canvas id="can" width="500px" height="300px"><canvas> <script>     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆     //畫一條線     ctx.lineWidth = 10;//設置線的粗細     ctx.moveTo(100, 100);//起點     ctx.lineTo(200, 100);//終點     ctx.lineTo(200, 200);//終點     //ctx.closePath();//之前的線是連續的,就可以閉合起點和最後一個終點     //ctx.fill();//未閉合區域填充色彩     ctx.stroke();//展示畫出的效果          ctx.beginPath();//重現開啟一個新路徑     ctx.lineWidth = 5;//設置線的粗細     ctx.moveTo(200, 200);//起點     ctx.lineTo(300, 300);//終點     ctx.stroke(); </script>   <script>     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆     //畫一個矩形,方式一     ctx.rect(100, 100, 200, 100);//給出矩形起點的坐標和長與寬     ctx.fill();     ctx.stroke();       //畫一個矩形,方式二     ctx.strokeRect(100, 100, 200, 100);       //畫一個矩形,方式三     ctx.strokeRect(100, 100, 200, 100); </script>   <script>     //寫一個下落的矩形     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆       var height = 100;     var timer = setInterval(function(){         ctx.clearRect(0, 0, 500, 300);//清除畫布矩形區域上,原來畫的圖案         ctx.strokeRect(100, height, 50, 50);         height += 2;     }, 1000 / 30); </script>   <script>     //畫圓,圓心(x, y), 半徑r, 弧度(起始弧度, 結束弧度), 方向(順時針或逆時針)     //弧度從0開始,右手邊水平方向位置     //弧度以圓周長計算,其中Math.PI代表圓周率π     //順時針為0,逆時針為1     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆     //畫一個圓     //arc(圓心x, 圓心y, 半徑r, 起始弧度, 結束弧度, 方向)     ctx.arc(100, 100, 50, 0, Math.PI/2, 0);     ctx.lineTo(100,100);     ctx.closePath();     ctx.stroke(); </script>   <script>     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆     //畫一個圓角矩形     ctx.moveTo(100, 110);//起點A     //arcTo(矩形拐角B點x, 矩形拐角B點y, 弧形方向C點x, 弧形方向C點y, 弧形像素)     ctx.arcTo(100, 200, 200, 200, 10);     ctx.arcTo(200, 200, 100, 200, 10);     ctx.arcTo(200, 100, 100, 100, 10);     ctx.arcTo(100, 100, 100, 200, 10);     ctx.fill();     ctx.stroke(); </script>   <script>     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆     //畫二次貝塞爾曲線     ctx.beginPath();     ctx.moveTo(100, 100);//起點A          //quadraticCurveTo二次貝塞爾曲線的其他兩個點坐標     ctx.quadraticCurveTo(200, 200, 300, 100);     ctx.stroke();       //畫三次貝塞爾曲線     ctx.beginPath();     ctx.moveTo(100, 100);//起點A          //bezierCurveTo三次貝塞爾曲線的其他三個點坐標     ctx.bezierCurveTo(200, 200, 300, 100, 400, 200);     ctx.stroke();       //畫一個寬500,高300的波浪     var width = 500;     var height = 300;     var num = 0;     var offset = 0;     setInterval(function(){         ctx.clearRect(0, 0, 500, 300);         ctx.beginPath();         ctx.moveTo(0, height / 2);//起點A                  //quadraticCurveTo二次貝塞爾曲線的其他二個點坐標         ctx.quadraticCurveTo(width/4 + offset - 500, height/2 + Math.sin(num)* 100, width/2 + offset - 500, height/2 + Math.sin(num)* 100);         ctx.quadraticCurveTo(width/4*3 + offset - 500, height/2 - Math.sin(num)* 100, width + offset - 500, height/2 - Math.sin(num)* 100);           //quadraticCurveTo二次貝塞爾曲線的其他二個點坐標         ctx.quadraticCurveTo(width/4 + offset, height/2 + Math.sin(num)* 100, width/2 + offset, height/2 + Math.sin(num)* 100);         ctx.quadraticCurveTo(width/4*3 + offset, height/2 - Math.sin(num)* 100, width + offset, height/2 - Math.sin(num)* 100);         ctx.stroke();         offset += 5;         offset %= 500;         num += 0.02;     }, 1000/30); </script>   <script>     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆     //坐標系原點預設是畫布的左上角     //旋轉     ctx.beginPath();     ctx.translate(100, 100);//坐標系原點平移到100,100     ctx.rotate(Math.PI / 6);//根據坐標系原點進行旋轉     ctx.moveTo(0, 0);//起點A     ctx.lineTo(100, 0);     ctx.stroke(); </script>   <script>     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆          ctx.beginPath();     ctx.scale(2, 1);//縮放     ctx.strokeRect(100, 100, 100, 100); </script>   <script>     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆     //改變坐標系的狀態後,怎樣變回原來的坐標狀態     ctx.save();//首先保存原坐標系的狀態,可以保存坐標系的平移,縮放,旋轉數據     ctx.translate(100, 100);//坐標系原點平移     ctx.rotate(Math.PI/4);//旋轉       ctx.beginPath();     ctx.strokeRect(0, 0, 100, 50);       ctx.beginPath();     ctx.restore();//恢複原坐標系的狀態     ctx.strokeRect(200, 0, 100, 50); </script>   <script>     //記住:紋理的填充都是以坐標系原點進行填充的,所以填充之前,看是否需要改變坐標系原點     //canvas背景填充     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆       var img = new Image();     img.src = "./good.png";     img.onload = function(){         ctx.beginPath();         ctx.translate(100, 100);//改變坐標系原點         var bg = ctx.createPattern(img, "no-repeat");//為畫填充紋理         ctx.fillStyle = bg;//換背景         ctx.fillRect(100, 100, 200, 100);     }; </script>   <script>     //canvas線性漸變,線性漸變的起點是坐標系原點     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆       ctx.beginPath();     var bg = ctx.createLinearGradient(0, 0, 200, 0);//漸變的兩點的坐標     bg.addColorStop(0, "white");//添加關鍵點,第一個參數只能0-1     bg.addColorStop(0.5, "blue");     bg.addColorStop(1, "black");     ctx.fillStyle = bg;     ctx.fillRect(0, 0, 200, 100); </script>   <script>     //canvas輻射漸變,輻射漸變的起點是坐標系原點     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆       ctx.beginPath();     var bg = ctx.createRadialGradient(100, 100, 30, 100, 100, 100);//漸變的圓心坐標x1,y1,半徑r1;圓心坐標x2,y2,半徑r2;     bg.addColorStop(0, "white");//添加關鍵點,第一個參數只能0-1     bg.addColorStop(0.5, "black");     bg.addColorStop(1, "white");     ctx.fillStyle = bg;     ctx.fillRect(0, 0, 200, 200); </script>   <script>     //給矩形添加陰影     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆       ctx.beginPath();     ctx.shadowColor = "blue";//添加陰影顏色     ctx.shadowBlur = 20;//添加陰影半徑     ctx.shadowOffsetX = 15;//橫坐標的陰影向右平移15px     ctx.shadowOffsetY = 15;//縱坐標的陰影向右平移15px     ctx.strokeRect(0, 0, 200, 200); </script>   <script>     //繪製文字     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆       ctx.beginPath();     ctx.strokeRect(0, 0, 200, 200);     ctx.fillStyle = "red";     ctx.font = "30px Georgia";//字體大小,字體       ctx.strokeText("panda", 200, 100);//回執的文字,橫坐標,縱坐標。對文字描邊,產生空心文字     ctx.fillText("panda", 200, 300);//回執的文字,橫坐標,縱坐標。對文字填充,產生實心文字,可以改變文字顏色 </script>   <script>     //線端樣式     var canvas = document.getElementById("can");     var ctx = canvas.getContext("2d");//獲得畫筆       ctx.beginPath();     ctx.lineWidth = 15;     ctx.moveTo(100, 100);     ctx.lineTo(200, 100);     //ctx.lineCap = "square";//線兩端的樣式。butt:原封不動;squre:方形;round:半圓;     ctx.lineTo(100, 150);     //ctx.lineJoin = "round";//兩條線交匯的樣式。round:圓角;bevel:截斷;miter:尖銳(設置為miter有一個miterLimit屬性,防止過分尖銳);     //ctx.miterLimit = 5;//兩條線交匯,限制交匯的長度     ctx.stroke(); </script> ```   以上是markdown格式的筆記
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 剛纔完成了合同表的變更,到最後一步rename table的時候 ,有個長時間的查詢占用了元數據鎖,導致rename的最後一步不能進行。將該會話kill後rename完成。 ...
  • MySQL的社區版沒有審計功能,企業版才有審計功能。企業版中自帶 Audit Plugin ,名為audit_log.so。但是其它MySQL分支版本也開發了各自的審計功能插件。最常見的就是Percona Audit Log Plugin、MariaDB Audit Plugin、當然還有通用插件M... ...
  • 1.MSC添加shard節點 mkdir -p /mongodb/38027/conf /mongodb/38027/log /mongodb/38027/datamkdir -p /mongodb/38028/conf /mongodb/38028/log /mongodb/38028/datam ...
  • 更多知識,請移步我的小破站:http://hellofriend.top 1. 概述 使用EXPLAIN關鍵字可以模擬優化器執行SQL查詢語句,從而知道MySQL是如何處理你的SQL語句的。分析你的查詢語句或是表結構的性能瓶頸。 通過Explain,我們可以獲取以下信息: 表的讀取順序 哪些索引可以 ...
  • 0.11 版本之前保證的語義是:至少一次 至少一次的解釋 可以做到消息不丟失--> 可以做到發送成功的消息一定可以被消費到。 不能做到消息不重覆。 ## 發送成功的消息,表示業務邏輯認為此消息已發送成功,即send方法已執行完成。 丟消息場景 非同步發送端: a:send之後,等待發送的時候down( ...
  • 一行代碼搞定圖片選擇 // // gzhPhotoManager.h // 圖片選擇 // // Created by 郭志賀 on 2020/5/26. // Copyright © 2020 郭志賀. All rights reserved. // #import <Foundation/Fou ...
  • 隨著項目的擴大,依靠人工codereview來保證項目的質量,越來越不現實,這時就有必要藉助於一種自動化的代碼審查工具:程式靜態分析。 程式靜態分析(Program Static Analysis)是指在不運行代碼的方式下,通過詞法分析、語法分析、控制流、數據流分析等技術對程式代碼進行掃描,驗證代碼 ...
  • 一、流程式控制制 1. 作用:控制代碼的執行順序 2. 分類 2.1順序結構:從上到下依次執行代碼語句 2.2選擇結構: 1. if語句 簡單if結構 if(條件表達式){ 表達式成立時執行的代碼段 } 註意 : 除零值以外,其他值都為真,以下條件為假值false if(0){} if(0.0){} i ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...