HTML5之canves繪圖

lt;canvas id="" width="" height=""></canvas>

<canvas>只是一個圖像的容器，相當于畫布。本身沒有繪圖能力。所有的繪制工作必須在JS中完成。

使用JS繪制圖像

<script>
// 找到定義的canvas元素。
var c=document.getElementById("ID");
//創建 context對象
//getContext("2d") 對象是內建的
//HTML5對象
//擁有多種繪制路徑。
var ctx=c.getContext("2d");
// fillStyle 屬性可以是css顏色，漸變
//或圖案。默認值為黑色。
ctx.fillStyle="#FF0000";
// 定義填充方式
//fillRect( x , y , width , height)
ctx.fillRect(0,0,150,75);
</script>

Canvas 路徑

畫線：

moveTo( x ,y ) --定義線條開始坐標。

lineTo( x ,y ) -- 定義線條結束坐標。

var c=document.getElementById("ID");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

畫圓：

arc(x, y, r, start, stop)

var c=document.getElementById("ID");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

文本：

font - 定義字體
fillText(text,x,y) - 在 canvas 上繪制實心的文本
strokeText(text,x,y) - 在 canvas 上繪制空心的文本

var c=document.getElementById("ID");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Canvas 漸變

createLinearGradient(x,y,x1,y1) - 創建線條漸變

x漸變開始點的x坐標
y漸變開始點的y坐標
x1漸變結束點的x坐標
y1漸變結束點的y坐標

createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變

x、y漸變的開始圓x、y坐標
r開始圓半徑
x1、y1漸變的結束圓x、y坐標
r1結束圓半徑

addColorStop()方法指定顏色停止，參數使用坐標來描述，可以是0-1；中間值采用0-1之間的小數可以實現添加多種顏色
使用漸變，設置fillStyle或是strokeStyle的值為漸變，然后繪制形狀。

線性漸變

var c=document.getElementById("ID");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

線性漸變

徑向漸變

本原則

結構、樣式、行為分離

盡量確保文檔和模板只包含 HTML 結構，樣式都放到樣式表里，行為都放到腳本里。

縮進

統一兩個空格縮進（總之縮進統一即可），不要使用 Tab 或者 Tab、空格混搭。

文件編碼

使用不帶 BOM 的 UTF-8 編碼。

在 HTML中指定編碼 <meta charset="utf-8"> ；

無需使用 @charset 指定樣式表的編碼，它默認為 UTF-8 （參考 @charset）；

一律使用小寫字母

省略外鏈資源 URL 協議部分

省略外鏈資源（圖片及其它媒體資源）URL 中的 http / https 協議，使 URL 成為相對地址，避免Mixed Content 問題，減小文件字節數。

其它協議（ftp 等）的 URL 不省略。

統一注釋

通過配置編輯器，可以提供快捷鍵來輸出一致認可的注釋模式。

HTML篇

標簽

自閉合（self-closing）標簽，無需閉合 ( 例如： img input br hr 等 )；
可選的閉合標簽（closing tag），需閉合 ( 例如：</li> 或 </body> )；
盡量減少標簽數量；

Class 與 ID

class 應以功能或內容命名，不以表現形式命名；
class 與 id 單詞字母小寫，多個單詞組成時，采用中劃線-分隔；
使用唯一的 id 作為 Javascript hook, 同時避免創建無樣式信息的 class；

屬性順序

HTML 屬性應該按照特定的順序出現以保證易讀性。

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

引號

屬性的定義，統一使用雙引號。

嵌套

a 不允許嵌套 div這種約束屬于語義嵌套約束，與之區別的約束還有嚴格嵌套約束，比如a 不允許嵌套 a。

嚴格嵌套約束在所有的瀏覽器下都不被允許；而語義嵌套約束，瀏覽器大多會容錯處理，生成的文檔樹可能相互不太一樣。

語義嵌套約束

<li> 用于 <ul> 或 <ol> 下；

<dd>, <dt> 用于 <dl> 下；

<thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下；

嚴格嵌套約束

inline-Level 元素，僅可以包含文本或其它 inline-Level 元素;

<a>里不可以嵌套交互式元素<a>、<button>、<select>等;

<p>里不可以嵌套塊級元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。

更多詳情，參考WEB標準系列-HTML元素嵌套

布爾值屬性

HTML5 規范中 disabled、checked、selected 等屬性不用設置值。

語義化

沒有 CSS 的 HTML 是一個語義系統而不是 UI 系統。

通常情況下，每個標簽都是有語義的，所謂語義就是你的衣服分為外套，褲子，裙子，內褲等，各自有對應的功能和含義。所以你總不能把內褲套在脖子上吧。– 一絲

此外語義化的 HTML 結構，有助于機器（搜索引擎）理解，另一方面多人協作時，能迅速了解開發者意圖。

HEAD

文檔類型

為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的表現。

語言屬性

lang屬性的取值應該遵循 BCP 47 - Tags for Identifying Languages。

字符編碼

以無 BOM 的 utf-8 編碼作為文件格式;

指定字符編碼的 meta 必須是 head 的第一個直接子元素；

IE 兼容模式

優先使用最新版本的IE 和 Chrome 內核

SEO 優化

viewport

viewport: 一般指的是瀏覽器窗口內容區的大小，不包含工具條、選項卡等內容；

width: 瀏覽器寬度，輸出設備中的頁面可見區域寬度；

device-width: 設備分辨率寬度，輸出設備的屏幕可見寬度；

initial-scale: 初始縮放比例；

maximum-scale: 最大縮放比例；

為移動端設備優化，設置可見區域的寬度和初始縮放比例。

iOS 圖標

apple-touch-icon 圖片自動處理成圓角和高光等效果;

apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖;

favicon

在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問，避免404，必須遵循以下兩種方法之一：

在 Web Server 根目錄放置 favicon.ico 文件；
使用 link 指定 favicon；

HEAD 模板

、語義化標簽

列表使用 ul li
文字使用 p span em cite 等標簽
標題使用 h1 h2 等標簽
布局使用 section aside header footer article 等 HTML5 布局標簽

2、自定義標簽

使用自閉合標簽的寫法小寫加下劃線

<template>
  <my-owner-components />
</template>

3、多特性分行寫

為提高可讀性組件應用時換行按照 ref、class、傳入、傳出順序書寫

<template>
  <my-components
    ref="myComponents"
    class="home-my-components"
    :data="data"
    @changeHandle="changeHandle"
  />
</template>

4、行內使用表達式

在模版中簡單情況使用表達式復雜情況使用計算屬性或函數

<template>
  <!-- 簡單情況 -->
  <div v-show="data.type===1">
    ...
  </div>
  <!-- 復雜情況 -->
  <div v-show="getTypeShow(data)">
    ...
  </div>
</template>

<script>
export default {
  methods: {
    /**
    * ***顯示判斷
    * @param data **
    */
    getTypeShow(data) {
      return data.type===1 && ...
    }
  }
}
</script>

5、避免重復

避免過多重復代碼果超過三行類似的代碼配置數據再循環遍歷

6、代碼嵌套

根據元素嵌套規范每個塊狀元素獨立一行內聯元素可選

<template>
  <!-- 情況1 -->
  <div>
    <h1></h1>
    <p></p>
    <p><span></span><span></span></p>
  </div>
  <!-- 情況2 -->
  <div>
    <h1></h1>
    <p></p>
    <p>
      <span></span>
      <span></span>
    </p>
  </div>
</template>

7、活用v-if v-show

v-show 不會改變dom樹不會導致重新渲染用于頻繁的切換顯示隱藏
v-if 會改變dom樹會導致重新渲染用于只控制一次顯示隱藏

8、注釋規范

<template>
  <!-- 標簽注釋 -->
  <div>
    ...
  </div>
  <!-- 組件注釋 -->
  <my-owner-components />
</template>

CSS規范

1、避免使用

避免使用標簽選擇器因為在 Vue 中特別是在局部組件使用標簽選擇器效率特別低損耗性能建議需要的情況直接定義 class
非特殊情況下禁止使用 ID 選擇器定義樣式（有 JS 邏輯的情況除外）
避免使用important選擇器
避免大量的嵌套規則控制在3級之內對于超過4級的嵌套考慮重寫或新建子項
避免使用ID選擇器及全局標簽選擇器防止污染全局樣式

2、推薦使用

提取公用樣式進assets文件styles里按模塊/功能區分
使用 scoped 關鍵字約束樣式生效的范圍
可復用屬性盡量抽離為頁面變量易于統一維護
使用混合（mixin）根據功能定義模塊然后在需要使用的地方通過 @include 調用避免編碼時重復輸入代碼段

3、書寫順序

CSS 屬性書寫順序先決定定位寬高顯示大小再做局部細節修飾
定位屬性(或顯示屬性 display)=> 寬高屬性=> 邊距屬性(margin padding)=> 背景顏色字體等修飾屬性的定義這樣定義為了更好的可讀性讓別人只要看一眼就能在腦海中浮現最終顯示的效果

.class-name {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 10px;
  padding: 10px;
  background-color: red; 
  border-radius: 2px;
  font-size: 14px;
  color: #000;
  line-height: 1.42;
}

4、樣式覆蓋

組件內部需要覆蓋UI框架樣式必須在最外層組件加類名

<template>
  <div class="input-container">
    <el-input class="name-input"></el-input>
  </div>
</template>

<style lang="scss">
.input-container {
  .name-input {
    .el-input__inner {
      font-size: 16px;
    }
  }
}
</style>

5、注釋規范

以 / 注釋內容 / 格式注釋前后空格嵌套子類需要一個回車分割開

/* 注釋內容 */
.class-name {
  width: 20px;
  
   /* 這里需要換行 */
  .class-name-l {
    color: blue
  }
}

JS規范

1、用法規范

在vue-cli 腳手架使用架自帶的指向 src 開發目錄的 '@' 符號引入文件資源
使用 template 或計算屬性規避 v-if 和 v-for 用在一起
統一使用單引號
堅持單一原則函數內僅做該函數應該做的盡量避免通過傳入標記控制不同行為
優先考慮三目運算符但不要寫超過3層的三目運算符
對于無用代碼必須及時刪除例如：一些調試的 console 語句、無用的棄用功能代碼
請求數據的方法使用try catch 錯誤捕捉注意執行回調

2、組件順序規范

<script>
export default {
  name: 'ExampleName',        // 這個名字推薦：大寫字母開頭駝峰法命名
  props: {},                  // Props 定義
  components: {},             // 組件定義
  directives: {},             // 指令定義
  mixins: [],                 // 混入 Mixin 定義。
  data () {                   // Data 定義。
    return {
      dataProps: ''           // Data 屬性的每一個變量都需要在后面寫注釋說明用途，就像這樣
    }
},
  computed: {},               // 計算屬性定義。
  watch: {},                  // 屬性變化監聽器。
  created () {},              // 生命鉤子函數，按照他們調用的順序。
  mounted () {},              // 掛載到元素。
  activated () {},            // 使用 keep-alive 包裹的組件激活觸發的鉤子函數。
  deactivated () {},          // 使用 keep-alive 包裹的組件離開時觸發的鉤子函數
  methods: {                  // 組件方法定義。
    publicbFunction () {}     // 公共方法的定義，可以提供外面使用
    _privateFunction () {}    // 私有方法，下劃線定義，僅供組件內使用。多單詞，注意與系統名字沖突！
  }
}
</script>

3、注釋規范

函數/方法注釋必須包含函數說明，有參數和返回值時必須使用注釋標識，它的作者, 依賴關系和兼容性信息。

單行注釋：雙斜線后應跟空格，且縮進與上下文的代碼保持一致；或在行尾注釋，在行尾依然需要左右空格

// 注釋
const userID=24
const userID=12 // 注釋

多行注釋：一般用于注釋難以理解的、可能存在錯誤的、邏輯強的代碼，且縮進一致

/*
 * 針對下方代碼的說明
 * 第一行太長寫第二行
 */
const aa=1

函數注釋：寫明傳入參數名稱、類型推薦完整注釋以下格式

/**
 * @Description 加入購物車
 * @Author luochen_ya
 * @Date 2024-03-13
 * @param {Number} goodId 商品id
 * @param {Array<Number>} specs sku規格
 * @param {Number} amount 數量
 * @param {String} remarks 備注
 * @returns <Promise> 購物車信息
 */
apiProductAddCard=(goodId, specs, amount, remarks)=> {
  return axios.post('***', { goodId, specs, amount, remarks })
}

文件注釋：寫明文件描述

/**
 * @Description: 文件描述
 * @Author: luochen_ya
 * @Date: 2024-03-13
 */

命名規范

1、目錄命名

按照小駝峰命名首字母小寫

項目文件夾：projectName
樣式文件夾：css / scss
腳本文件夾：js

2、圖片命名

圖片就是img開頭圖標就是icon開頭

img_功能_模塊_編號
icon_功能_模塊_編號

3、文件命名

按照小駝峰命令英文單詞過長或超出2個以上可縮略至前四位列如：comming_soon.png 等
有復數含義采用復數命名列如：minixs styles images icons 等
靜態資源命名格式為小寫 + 下劃線列如：icon_arrow.png img_logo.png 等
組件命名為小駝峰公用組件加上gd前綴列如：gdOwnerComponents 等

4、方法命名

method 方法命名不同于文件命名，盡量完整英文命名，語義表達需完整清楚

按照小駝峰命名法可使用常見動詞約定

can：判斷是否可執行某個動作函數返回一個布爾值 true可執行 false不可執行
has：判斷是否含有某個值函數返回一個布爾值 true含有此值 false不含有此值
is：判斷是否為某個值，函數返回一個布爾值 true為某個值 false不為某個值
get：獲取某個值函數返回一個非布爾值
set：設置某個值無返回值或者返回是否加載完成的結果

語義化英文命名僅組件內部使用方法前加上_（下劃線）區分

<script>
export default {
  methods: { // 組件方法定義
    publicbFunction () {} // 公共方法的定義 可以提供外面使用
    _privateFunction () {} // 私有方法 下劃線定義 僅供組件內使用
  }
}
</script>

引入組件：首字母大寫的駝峰法命名

import MyOwnerComponents from '@/components/MyOwnerComponents'

變量：使用駝峰式命名優先使用 let const 避免使用 var

let userName='luochen_ya'
const userInfo={
  name: 'luochen_ya',
  age: 24
}

常量：字母全部大寫以下橫線 _ 劃分

const Constant={
  // 公用狀態
  COMMON_STATUS_ENABLE=1, // 啟用
  COMMON_STATUS_DISABLE=2, // 停用
}

5、樣式命名

class命名以小寫字母開頭小寫字母、中劃線和數字組成以下是一些常用到的 class的名字

包裹層: .xxx-wrap
列表: .xxx-list
列表項: .xxx-list-item
左邊內容: .xxx-left
中間內容: .xxx-middle
右邊內容: .xxx-right
某個頁面：.xxx-page

6、常用詞

常用動詞

get=> 取值
set=> 給值
add=> 新增
remove=> 移除
show=> 顯示
hide=> 隱藏
view=> 查看
browse=> 瀏覽
edit=> 修改
save=> 保存
delete=> 刪除
find=> 查詢
undo=> 撤銷
redo=> 重做
clean=> 清除
index=> 索引
observe=> 觀察
send=> 發送
receive=> 接收
refresh=> 刷新
synchronize=> 同步

常用縮寫

object=> obj
array=> arr
function=> fn
message=> msg
button=> btn

工程結構

1、目錄構建

├── api                       所有api接口
├── assets                    靜態資源
│   ├── fonts                   全局公用字體
│   ├── icons                   全局公用圖標
│   ├── images                  全局公用圖片
│   └── styles                  全局公用樣式
├── components                公用組件
│   ├── base                    基礎組件
│   └── business                業務組件
├── constants                 常量 統一管理
├── locales                   多語言管理
├── plugins                   插件 統一管理
├── router                    路由 統一管理
│   └── index.js               
├── store                     vuex 統一管理
│   ├── modules                 
│   ├── getters.js              
│   └── index.js                
├── utils                     工具函數 統一管理
├── views                     視圖目錄（所有業務邏輯的頁面）

2、代碼風格

可以直接使用eslint 強制統一代碼規范還能規避一些語法錯誤或者按照以下自己定義的去配置eslint來使用
以下是個人習慣僅供參考

首行縮進2空格
js代碼去除分號
html代碼超出255字符一行進行換行操作
js代碼統一使用單引號或雙引號

在線咨詢

上一篇：Spring Boot：實現MyBatis分頁
下一篇：轉盤抽獎效果

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商