ctx.linecap =
"round"
//超出去的圓角 butt 未出頭的 squre 出頭的
ctx.linejoin =
"bevel"
// 平角 round 圓角 miter 尖角
ctx.linewidth =
5;
ctx.strokestyle =
"red"
ctx.fillstyle =
"#ffdd88"
ctx.
beginpath
()
ctx.
moveto
(100
,100
)
ctx.
lineto
(200
,100
)
ctx.
stroke()
;
ctx.
moveto
(300,50
);ctx.
lineto
(300
,350
);
var canvas = document.
queryselector
("canvas");
var ctx = canvas.
getcontext
("2d");
ctx.linecap =
"round"
; ctx.linejoin =
"miter"
; ctx.linewidth =2;
ctx.strokestyle =
"red"
; ctx.fillstyle =
"#ffdd88"
; ctx.
beginpath()
; ctx.
moveto
(300
,350);
ctx.
lineto
(100
,200);
ctx.
lineto
(300,50
);ctx.
lineto
(500
,200);
ctx.
closepath()
; ctx.
fill()
;
ctx.
closepath()
; ctx.
fill()
;
var canvas = document.
queryselector
("canvas");
var ctx = canvas.
getcontext
("2d");
ctx.linecap =
"round"
; ctx.linejoin =
"miter"
; ctx.linewidth =2;
ctx.strokestyle =
"red"
; ctx.fillstyle =
"#ffdd88"
; ctx.fillstyle =
"#ffdd88"
ctx.
beginpath()
; ctx.
moveto
(200
,200);
ctx.
lineto
(600
,200);
ctx.
lineto
(250
,450);
ctx.
lineto
(400,50
);ctx.
lineto
(550
,450);
ctx.
closepath()
; ctx.
stroke()
; ctx.
fill
()
ctx.beginpath();ctx.
arc(
100,
100,
50,math.pi/
180*
0,math.pi/
180*
360)
;
ctx.
stroke()
;
ctx.
fill()
;
ctx.
beginpath()
; ctx.
arc(
100,
100,
50,math.pi/
180*
0,math.pi/
180*
180)
;//關閉路徑
ctx.
closepath()
; ctx.
stroke()
; ctx.
fill()
;
ctx.
beginpath()
; ctx.
moveto
(100
,100
);
ctx.
arc(
100,
100,
50,math.pi/
180*
330,math.pi/
180*30,
true);
ctx.
closepath()
; ctx.
stroke()
; ctx.
fill()
; ctx.fillstyle=
"red"
;
ctx.
translate(10
,0);
ctx.
beginpath()
; ctx.
moveto
(100
,100);
ctx.
arc(
100,
100,
50,math.pi/
180*
330,math.pi/
180*30)
; ctx.
closepath()
; ctx.
stroke()
; ctx.
fill()
;
//圓環案例
//繪製徑向填充
//漸變引數 x y起始位置 半徑 結束位置 x y結束位置 結束半徑
var file = ctx.
createradialgradient
(100
,100
,100
,100
,100,50
);//偏移 0.48 顏色
//加過渡解決毛邊問題
file.
addcolorstop
(0.48
,"rgba(255,0,0,0.3)");
file.
addcolorstop
(0.5
,"rgba(255,0,0,0)");
file.
addcolorstop
(0.5
,"rgba(255,0,0,0)");
ctx.shadowoffsetx =5;
ctx.shadowoffsety =5;
ctx.shadowblur =5;
ctx.shadowcolor =
"#cccccc"
; ctx.fillstyle = file;
ctx.
beginpath()
; ctx.
arc(
100,
100,
100,
(math.pi/
180)*0
,(math.pi/
180)
*360);
ctx.
closepath()
; ctx.
fill()
; ctx.shadowoffsetx =0;
ctx.shadowoffsety =0;
ctx.shadowblur =0;
ctx.shadowcolor =
"#cccccc"
;
canvas快速入門4 繪製文字
我們在使用canvas畫各種圖的時候，大多時候會有文字的繪製，比如，各種圖表，進度條，鐘錶等等，都需要繪製文字。所以繪製文字也是canvas入門必須的基礎。繪製文字很簡單就下面這個方法。但是想一下，我們用css對字型通常有哪些操作？比如字型大小，顏色，字型等。其實這些，canvas中都提供了相應的a...
二 快速入門
一 springboot預設埠號為8080 在沒有主啟動類的情況下 package com.dudu.service import org.springframework.boot.autoconfigure.enableautoconfiguration import org.springfram...
Flask入門二 快速入門
from flask import flask 路由裝飾器 defhello world 檢視函式 return hello world 返回乙個字串 if name main 把程式儲存為hello.py 用python直譯器執行 python hello.py running on訪問 會看見 ...