threejs學習（五） canvas入門學習

前言

最近專案中使用到了threejs中的sprite元件；為了更好實現sprite元件的介面效果；以及我們在h5中繪製圖表，都需要用到canvas這個標籤；所以需要對canvas有較為深入的學習；

canvas是乙個html5的標籤，這個標籤可以被瀏覽器渲染為畫布；canvas只是乙個容器；這個容器可以裝在2d（let ctx = canvas.getcontext(「2d」)），也可以裝在3d（let ctx = canvas.getcontext(「webgl」)）；

這個容器沒有繪圖功能，canvas只是乙個畫布；繪圖能力是canvas上下文物件；

1.canvas繪製**座標軸；

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
canvas-繪製**<
/title>
<
/head>
"500px" height=
"500px" id=
"canvas"
>
瀏覽器不支援，請公升級版本！
<
/canvas>
(function()
// 這裡需要呼叫stroke方法；否則執行beginpath方法後，畫的座標格仔不被顯示
ctx.strokestyle =
"blue"
; ctx.
stroke()
;// 繪製座標系
// 告訴canvas咱們要重新繪製一條全新的路徑了，之前畫的東西從此再無關係
ctx.
beginpath()
; ctx.linewidth =1;
// 設定線條寬度為1px
ctx.
moveto(50
,400);
ctx.
lineto
(400
,400);
ctx.
lineto
(390
,390);
ctx.
moveto
(400
,400);
ctx.
lineto
(390
,410);
ctx.
moveto(50
,400);
ctx.
lineto(50
,100);
ctx.
lineto(40
,110);
ctx.
moveto(50
,100);
ctx.
lineto(60
,110);
// 呼叫次函式才會在canvas上顯示劃的線
ctx.strokestyle =
"red"
; ctx.
stroke()
;// 畫折線
let array =[,
,,,]
ctx.
beginpath()
; ctx.linewidth =1;
ctx.
moveto(50
,400);
for(
let i =
0; i < array.length; i++
) ctx.
stroke()
;}()
);<
/script>
<
/body>
<
/html>

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
矩形<
/title>
<
/head>
"canvas" width=
"500" height=
"500"
>
瀏覽器不支援
<
/canvas>
(function()
())<
/script>
<
/body>
<
/html>

THREEJS載入必要五要素

threejs載入3d模型 就像人的眼睛去看這個世界，需要有所處的環境，眼睛，看的物體，有光等等 場景就像人所處的環境一樣，所有的模型 都是在這個場景中去展示 去活動 this scene newthree.scene 攝像機就像人的眼睛 var k width height 視窗寬高比 建立相機物...

threejs學習隨記（一）

在three.js中，要渲染物體到網頁中，我們必須構建場景 scene 相機 camera 和渲染器 renderer 有了這三樣東西，才能將物體渲染到網頁中去。threejs繪圖的核心 設定渲染器renderer 設定場景 scene 設定相機 camera 設定光源 light 設定物體 obj...

threejs學習筆記 材質

meshbasematerial 網格基礎材質 meshbasematerial 網格基礎材質 是一種非常簡單的材質，這種材質不會考慮光照的影響。使用這種材質網格備渲染成簡單的平面多邊形，可以用它賦予幾何體一種簡單的顏色,並且可以顯示幾何體的線框。meshdepthmaterial 網格深度材質 m...