DIV CSS 佈局教程網

  ① 主要作用：繪制矢量圖 ② 矢量圖圖形（路徑）-（ILL） 位圖圖像（像素點）- PS中圖像都是位圖 ③ Canvas 能夠制作動畫,但是不是為了制作動畫而生的也能夠制作游戲。主要為了繪圖而生。 ④ 能夠設置寬高 推薦樣式寫在style；Canvas 相當於是一個繪制圖形的容器，並沒有繪制功能，需要借助JS（腳本）實現繪制功能。 思路： getContext( ) var context = cnvas.getContext('2d'); // 圖像的繪制
// 開始 beginPath（）開始路徑
// 起點 
// 過程路徑
// 終點
// 落筆
// 結束 closePath（）結束路徑 方法： beginPath（） 開始路徑 moveTo（x,y） 把路徑移到畫布中指定點 不創建路徑lineTo（x,y） 添加一個新點 closePath（） 結束路徑 fillStyle 用來設置填充顏色stroke 繪制異地內衣好的路徑 fill（） 填充已定義好的路徑
context.lineWidth = 5; 主要書寫順序 先顏色再填充 
<script>
var cnvas = document.getElementById('cnvas');
var context = cnvas.getContext('2d');
context.moveTo(200,100);
context.lineTo(600,100);
context.lineTo(600,300);
context.lineTo(200,300);
context.lineTo(200,100);
context.closePath();
context.fillStyle = 'red';
context.stroke(); // 描邊
context.fill(); // 填充顏色
</script>
矩形的繪制： rect（x，y，w，h） ：x y為起始坐標 w,h為矩形的寬 高 fillRect<喎�"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPqOoeKOseaOsd6OsaKOpo7qyzsr9zazJzyDT68nPw+bH+LHwo7rJz8Pm1ru75tbGo6yyu8zus+SjrGZpbGxSZWN0o6ijqczus+QKPHN0cm9uZz7UstDOtcS75tbGo7o8L3N0cm9uZz4KPHN0cm9uZz5hcmM8L3N0cm9uZz6jqHijrHmjrHKjrHNho6xlYaOsdHJ1ZS9mYWxzZaOpIAp4IHnOqtSy0MTX+LHqo6xyzqqw6762o6xzYSBlYbfWsfDOqsbwyry9x7bIus294cr4vce2yKOs1+6689K7uPayzsr9zqp0cnVlIMuzyrHV67ut1LKjrCBmYWxzZc6qxObKsdXru63UsgoKCgo8dGFibGUgYm9yZGVyPQ=="1" cellpadding="2" cellspacing="0" width="600"> var cnvas = document.getElementById('cnvas');
var context = cnvas.getContext('2d');
for (var i = 0; i < 5; i++) {
context.beginPath();
context.strokeStyle = 'red';
// context.arc(10*Math.pow(2,i),100,10*Math.pow(2,i),0,Math.PI*2,true);
context.arc(10*i,100,10*i,0,Math.PI*2,true);
context.stroke();
context.closePath();
};
for (var i = 0; i < 5; i++) {
context.beginPath();
context.strokeStyle = 'yellow';
context.arc(10*Math.pow(2,i),300,10*Math.pow(2,i),0,Math.PI*2,true);
// context.arc(10*i,100,10*i,0,Math.PI*2,true);
context.stroke();
context.closePath();
}; 
不加的情況下 

context.lineCap = "round'; 線帽 
? 1 2 3 4 5 6 7 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(20,20); ctx.lineTo(20,200); ctx.stroke()
其他參數 context.lineCap="butt|round|square"; 
貝塞爾曲線 quadraticCurveTo（kx,ky,ex,ey） 二次貝塞爾曲線，一個控制點，一個終點bezierCurveTo（kx1，ky1，kx2，ky2，ex，ey） 三次貝塞爾曲線， 兩個控制點 一個終點 context.clearRect（x,y,w,h）; 清畫布 
 產生隨機貝塞爾曲線 

<script>
var cnvas = document.getElementById("cnvas');
var context = cnvas.getContext('2d');
context.fillStyle = 'rgba(0,0,0,1)';
context.fillRect(0,0,800,400);
// 三個控制點 每一個點都需要兩個值 這兩個點隨機
// 每條線 都需要顏色(rgba) 三個顏色隨機
// setInterval(fun,1000);
// bezierCurveTo
// Math.round() Math.random()
//
setInterval(draw,1000);
function draw () {
var kx1 = Math.round(Math.random()*700);
var ky1 = Math.round(Math.random()*350);
var kx2 = Math.round(Math.random()*750);
var ky2 = Math.round(Math.random()*400);
var ex = Math.round(Math.random()*750);
var ey = Math.round(Math.random()*400);
var colorR = Math.round(Math.random()*255);
var colorG = Math.round(Math.random()*255);
var colorB = Math.round(Math.random()*255);
context.shadowOffsetX = 4; // 陰影Y軸偏移 
context.shadowOffsetY = 5; // 陰影X軸偏移 
context.shadowBlur = 6; // 模糊尺寸 
context.shadowColor = "rgba("+colorG+", "+colorB+", "+colorR+", 0.4)"; // 顏色
context.fillStyle = 'rgba(0,0,0,1)';
context.fillRect(0,0,800,400);
context.beginPath();
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0,0,800,400);
context.bezierCurveTo(kx1,ky1,kx2,ky2,ex,ey);
context.lineWidth = 4;
context.strokeStyle = "rgb("+colorR+","+colorG+","+colorB+")";
context.stroke();
context.closePath();
}
</script>

繪制文字： fillText(text，x,y,maxWidth)：text表示文字，x，y為坐標，maxWidth可選，為文字最大寬度，防止文字溢出，填充文字 
strokeText(text,x,y,maxWidth)：text表示文字，x，y為坐標，maxWidth可選，為文字最大寬度，防止文字溢出，繪制文字
save（） restore（） ① 繪制復雜圖形必不可少的方法,分別用來保存、恢復canvas的狀態，無參數 ② sava用於保存canvas狀態,save之後,可以調用canvas的平移,縮放,旋轉，裁切之類的操作 ③ restore用於恢復canvas之前的保存狀態，防止save後的操作對後續繪制造成影響 ④ sava和restore配對使用，restore的次數小於等於save 陰影屬性：

shadowColor：設置陰影顏色

shadowBlur：設置陰影模糊級別

shadowOffsetX：設置陰影在x軸上距離圖形的距離

shadowOffsetY：設置陰影在y軸上距離圖形的距離

canvas繪制圖像 視頻 drawImage(img,x,y,width,height) 或者是 drawImage(img,x,y) 【1】 HTML結構：




JS結構

context.beginPath();
context.drawImage(img,60,60,50,50); // drawImage(img,x,y,width,height)
context.closePath();

【2】
? 1 2 3 4 5 6 7 <script type="text/javascript">   var c=document.getElementById("myCanvas");   var cxt=c.getContext("2d");   var img=new Image();   img.src="flower.png";   cxt.drawImage(img,0,0); </script> 圖像的平鋪 context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); 

img：圖片

type： repeat整個畫布平鋪

repeat-x在x軸方向上平鋪

repeat-y在y軸方向上平鋪

no-repeat不平鋪 ------------------------------- var imageObj = new Image();
imageObj.src = "http://www.2cto.com/uploadfile/2014/0612/20140612111655720.png"; 

var pattern = context.createPattern(imageObj, "repeat"); 
context.rect(10, 10, cavas.width - 20, cavas.height - 20); 
context.fillStyle = pattern; 
context.fill(); 

drawImage() 方法在畫布上繪制圖像、畫布或視頻。

drawImage() 方法也能夠繪制圖像的某些部分，以及/或者增加或減少圖像的尺寸。

JavaScript 語法 1

在畫布上定位圖像：

? 1 <em>context</em>.drawImage(<em>img</em>,<em>x</em>,<em>y</em>);

JavaScript 語法 2

在畫布上定位圖像，並規定圖像的寬度和高度：

? 1 <em>context</em>.drawImage(<em>img</em>,<em>x</em>,<em>y</em>,<em>width</em>,<em>height</em>);

JavaScript 語法 3

剪切圖像，並在畫布上定位被剪切的部分：

? 1 <em>context</em>.drawImage(<em>img</em>,<em>sx</em>,<em>sy</em>,<em><strong>swidth</strong></em>,<em><strong>sheight</strong></em>,<em>x</em>,<em>y</em>,<em>width</em>,<em>height</em>); canvas繪制視頻

<script>
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');

v.addEventListener('play', function() {var i=window.setInterval(function() {ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false); 
</script> Cavans 漸變 ? 1 2 3 4 5 6 7 8 9 <script type="text/javascript">   var c=document.getElementById("myCanvas");   var cxt=c.getContext("2d");   var grd=cxt.<strong>createLinearGradient</strong>(0,0,175,50);   grd.<strong>addColorStop</strong>(0,"#FF0000");   grd.<strong>addColorStop</strong>(1,"#00FF00");   cxt.<strong>fillStyle</strong>=grd;   cxt.<strong>fillRect</strong>(0,0,175,50); </script> ? 1 <img src="http://www.2cto.com/uploadfile/Collfiles/20140612/20140612091804311.png" alt="" style="width: 263px; height: 91px; ">