資訊專欄INFORMATION COLUMN
摘要：上一篇給大家講了一下的一些概念性的東西，這一篇我們來講一下的最基礎的應用定義一個畫圖畫路徑和表示的是里面的繪制路徑，不加的話會出現靈異事件靈異事件通俗的講就是后繪制的圖形不能精確的識別上一線的開始處這個用來定義線段終點的類型定義線段的連接類
上一篇給大家講了一下canvas的一些概念性的東西，這一篇我們來講一下canvas的最基礎的應用：
定義一個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里面的繪制路徑，不加的話會出現靈異事件,靈異事件通俗的講就是后繪制的圖形不能精確的識別上一線的開始處;
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）畫圓
里面傳6個參數,分別是起始坐標，半徑，開始弧度，結束弧度，旋轉方向;
ctx.beginPath(); ctx.arc(50,50,50,0,Math.PI,true); ctx.fill(); ctx.fillStyle="#00f"; ctx.closePath();
（4）漸變
?在canvas中我們可以用createLinearGradient() 和createRadialGradient
() 來進行漸變的設置
放射性漸變?
?（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坐標
y -- 相對于畫布的Y坐標
maxWidth -- 允許的最大文本寬度（可選參數）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115450.html
摘要：動畫才是我們今天要談論的主要內容如何做到。所以在做動畫的時候，不要用做計算密集型的任務，返回的對象做好緩存，避免多次調用。所以開發小組就將和合二為一，利用的排版優勢和的渲染優勢。在其上層再加入一層，用來顯示渲染的結果。 自從 HTML5 誕生之后，關于 Web App 和 Native App 的討論就從未間斷過，孰優孰劣大家各執一詞。但作為前端開發者的我們，心里其實是明白的，這個世界...
閱讀 3904·2021-11-22 09:34
閱讀 1490·2021-11-04 16:10
閱讀 1721·2021-10-11 10:59
閱讀 3271·2019-08-30 15:44
閱讀 2035·2019-08-30 13:17
閱讀 3445·2019-08-30 11:05
閱讀 744·2019-08-29 14:02
閱讀 2618·2019-08-26 13:34
