資訊專欄INFORMATION COLUMN
摘要：上一篇給大家講了一下的一些概念性的東西，這一篇我們來講一下的最基礎(chǔ)的應(yīng)用定義一個畫圖畫路徑和表示的是里面的繪制路徑，不加的話會出現(xiàn)靈異事件靈異事件通俗的講就是后繪制的圖形不能精確的識別上一線的開始處這個用來定義線段終點的類型定義線段的連接類
上一篇給大家講了一下canvas的一些概念性的東西，這一篇我們來講一下canvas的最基礎(chǔ)的應(yīng)用：
定義一個canvas：??
var ctx =document.getElementById_x("canvas").getContext("2d");
（1）畫圖
ctx.fillStyle="rgba(255,255,255,0.5)";
ctx.fillRect(0,0,100,100)
（2）畫路徑
?beginPath()和closePath()表示的是canvas里面的繪制路徑，不加的話會出現(xiàn)靈異事件,靈異事件通俗的講就是后繪制的圖形不能精確的識別上一線的開始處;
ctx.beginPath(); ctx.fillStyle="#f00"; ctx.moveTo(10,10); ctx.lineTo(100,100); ctx.lineTo(100,150); ctx.lineWidth=10; ctx.lineCap="round"; //這個用來定義線段終點的類型 ctx.linejoin="round"; // 定義線段的連接類型 ctx.stroke(); ctx.closePath();
（3）畫圓
里面?zhèn)?個參數(shù),分別是起始坐標(biāo)，半徑，開始弧度，結(jié)束弧度，旋轉(zhuǎn)方向;
ctx.beginPath(); ctx.arc(50,50,50,0,Math.PI,true); ctx.fill(); ctx.fillStyle="#00f"; ctx.closePath();
（4）漸變
?在canvas中我們可以用createLinearGradient() 和createRadialGradient
() 來進行漸變的設(shè)置
放射性漸變?
?（5）陰影
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0,0,0,0.5)";
ctx.font = "20px Times New Roman"; //文字
ctx.fillStyle = "black"; //文字填充顏色
ctx.fillText("Hello World",5,30) //在畫布上繪制填充顏色的文字
fillText是指在畫布上繪制文本；fillText(text,x,y,maxWidth)；
text -- 畫布上輸出文本；
x -- 相對于畫布的X坐標(biāo)
y -- 相對于畫布的Y坐標(biāo)
maxWidth -- 允許的最大文本寬度（可選參數(shù)）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86626.html
摘要：動畫才是我們今天要談?wù)摰闹饕獌?nèi)容如何做到。所以在做動畫的時候，不要用做計算密集型的任務(wù)，返回的對象做好緩存，避免多次調(diào)用。所以開發(fā)小組就將和合二為一，利用的排版優(yōu)勢和的渲染優(yōu)勢。在其上層再加入一層，用來顯示渲染的結(jié)果。 自從 HTML5 誕生之后，關(guān)于 Web App 和 Native App 的討論就從未間斷過，孰優(yōu)孰劣大家各執(zhí)一詞。但作為前端開發(fā)者的我們，心里其實是明白的，這個世界...
閱讀 1763·2021-11-18 13:20
閱讀 1153·2021-10-11 10:59
閱讀 2991·2021-08-24 10:01
閱讀 3503·2019-08-29 14:21
閱讀 3355·2019-08-29 14:15
閱讀 3520·2019-08-26 12:23
閱讀 3346·2019-08-26 11:46
閱讀 3352·2019-08-26 11:35
