HTML5新特性 canvas 畫布

canvan 畫布

您的瀏覽器不支援

canvas就是乙個標籤，預設值的大小為 300/150，display為inline-block；

*注意*：不能在css中設定寬和高，只能在標籤中設定width和height的值，沒有單位

設定居中為：text-align：center；

定義畫筆===獲取上下文

var painting=canvas.getcontext('2d');

填充矩形fillrect(x,y,w,h);

painting.fillrect(0,0,100,100);
改變元素的填充色：painting.fillstyle='rgba(0,0,200,0.5)';
描邊矩形strokerect(x,y,w,h);
painting.strokerect(0,0,100,100);
painting.strokestyle='rgba(0,0,200,0.4)';
畫矩形：painting.rect(50,50,100,100); 
填充：painting.fill();
描邊：painting.stroke(); 
抬筆：painting.beginpath();
畫線段：
起始座標：painting.moveto(x,y);
結束座標：painting.lineto(x,y);
收尾相連：painting.closepath(); 
畫三角形：painting.beginpath();
painting.moveto(30,30); 
painting.lineto(80,30);
painting.lineto(80,80);
painting.closepath();
painting.stroke();
畫正方形：painting.beginpath();
painting.moveto(50,50);
painting.lineto(100,50);
painting.lineto(100,100);
painting.lineto(100,50);
painting.closepath();
painting.stroke();
畫圓：painting.arc(x,y,r,sdeg,edeg,true/false);
//引數1，引數2：圓心座標
//引數3：半徑
//引數4，引數5：起始角度，結束角度
//引數6：是順時針(false)還是逆時針(true) --- false預設值
painting.beginpath();
painting.arc(100,100,40,0,2*math.pi,true);
painting.closepath();
painting.stroke();
圓弧：painting.arcto(x1,y1,x2,y2,r);
painting.beginpath();
painting.moveto(50,50);
painting.lineto(100,50);
painting.arcto(150,50,150,70,50);
painting.lineto(150,150);
painting.stroke();
文字：painting.filltext();
//水平居中
painting.textalign = 'start';/*預設值*/
painting.textalign = 'center';
painting.textalign = 'end';
//垂直對齊
painting.textbaseline = 'top';
painting.textbaseline = 'hanging';
painting.textbaseline = 'middle';
painting.textbaseline = 'bottom';
painting.textbaseline = 'alphabetic';/*預設值*/
//文字
painting.font = 'bold 50px 微軟雅黑';
painting.fillstyle = 'blue';
painting.filltext('a棗樹',250,80);
//鏤空字
painting.stroketext('a棗樹',250,80);
painting.beginpath();
painting.fillstyle = 'red';
painting.fillrect(250,80,300,2);
實現五角星：
var canvas=document.getelementbyid('canvas');
var painting=canvas.getcontext('2d');
painting.translate(100,100);
var r=100;
var r=40;
painting.moveto(r*math.cos(18/180*math.pi),-r*math.sin(18/180*math.pi))；
for (var i=0;i<5;i++)
painting.closepath();
painting.fillstyle='red';
painting.fill();

HTML5 用CANVAS畫時鐘

本篇文章的所有 acdreamers 的 第乙個canvas例項 鐘錶 本文主要是對 中所使用的方法進行詳細說明，雖然原作者在 已經注釋得很清楚了。一 獲取上下文物件 var cxt document.getelementbyid 元素名 getcontect 2d ie8或更早的瀏覽器不支援元素。...

HTML5的新特性

html的新特性 html5是下一代html標準 強化了web的表現性 支援網頁多 提供canvas畫布 2d圖形 三維 圖形及特效 支援語義化標籤 header footer 新的表單標籤 增加離線本地儲存 地理定位 應用快取 快取 將經常需要訪問的資料，放在記憶體中或者本地磁碟裡 canvas ...

html5 標籤新特性

html5主要的特徵就是標籤語義化。語義化的好處就是使得 結構讓人清晰易讀，這些語義化的標籤會有一些自帶屬性，比如說邊距 顏色 和display的設定等等 頭部 內容 內容分塊1 內容分塊2 內容分塊3 底部 導航 側欄 引用 自帶邊距，和縮排 標記 保留書寫的樣式 包括空格 tab 還有 ente...