開始學canvas,每次都寫會很麻煩,我要創建一個canvas畫布的模板代碼。
1.文件 => 首選項 => 用戶代碼片段
2.選擇你需要新建的代碼片段的語言,
如果是CSS片段就選css.json,HTML片段就選html.json以此類推。
我選的是新建一個
3.進入代碼片段編輯界面
1. 所有的代碼片段需要用""或''包裹
2. \\t表示製表符
3. 空的一行必須用''或""包裹
4. $1代表光標第一次出現的位置,$2代表按下tab後光標第二次出現的位置
5、prefix 是該片段的名字
6、description 是該片段的描述
4、創建自己的模板
{
"creat a canvas template": {
"scope": "javascript,html",
"prefix": "canvas", //片段名字
//片段代碼都在body裏
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"\t<style>",
"\t\t#box {",
"\t\t\tborder: 1px solid red;",
"\t\t\tmargin-left: 100px;",
"\t\t}",
"\t</style>",
"</head>",
"",
"<body>",
"\t<canvas id=\"box\" width=\"700\" height=\"600\"> </canvas>",
"",
"\t<script>",
"\t\tvar tag = document.getElementById(\"box\")",
"\t\tvar ctx = tag.getContext(\"2d\");",
"\t\t$1",
"\t</script>",
"</body>",
"</html>",
"$2"
],
"description": "創建一個canvas練習模板" //該片段的描述
}
}
5、使用
在編輯器裏輸入自己的代碼片段的名字就會有提示出來
參考: 官方文檔