canvas屬于客戶端技術,圖片在服務器中,所有瀏覽器必須先下載
要繪制圖片,且等待圖片異步加載成功后繪制.
? 1:創(chuàng)建圖片對象? ? var p3 = new Image();
? 2:下載圖片? ? ? ? p3.src = "x.png";
? 3:綁定事件 onload? p3.onload = function(){} 圖片下載成功
? 4:繪制圖片? ? ? ? ctx.drawImage(p3,x,y);? 原始大小繪圖
? ? ? ? ? ? ? ? ? ? ctx.drawImage(p3,x,y,w,h); 拉抻繪圖
html5新特性--canvas[變形操作]
? ctx.rotate(弧度); 旋轉畫筆對象，軸點為畫布的原點
? ctx.translate(x,y); 將整個畫布的原點平移到指定點
? ctx.save();? ? ? 保存畫筆當前所有狀態(tài)(角度/原點/顏色)<存盤>
? ctx.restore();? ? 恢復畫筆狀態(tài)到最近一次保存中? <讀取存盤>
?
3.3:html5新特性--svg
位圖:由一個又一個像素組成,每個點各有自己的顏色，色彩細膩,但是放大失真.
矢量圖:由一個又一個線條組成,每個線條指定顏色，方向，可以無限縮放，但是細節(jié)不夠豐富
SVG(可縮放的矢量圖)
canvas：2d位圖，js代碼繪圖，事件只能綁定畫布，適用于游戲
svg：2d矢量圖，標簽，事件可以綁定到元素
類型，地圖應用
? SVG 技術誕生2000年,早期作為XML的擴展,H5把常用SVG標簽
? 采納為標準，但有一些廢棄.
? html-->xml ->html5
? 3.4:html5新特性--svg--矩形
? <svg id="" width="" height="">
? ? svg 畫布
? ? <rect? width="" height="" x="" y=""
? ? fill="" stroke="" fill-opacity="" stroke-opacity=""
? ? stroke-width=""></rect>
? </svg>
svg繪圖特點--著重注意
(1)所有圖形默認只有填充色(黑色)沒有描邊色
(2)svg圖形的樣式可以用元素屬性方式聲明,也可以使用css
聲明,只能使用svg專用樣式，不能使用CSS樣式,
如邊框設置只能 stroke,不能用border
(3)圖形可以使用JS來對屬性賦值,但不能用html dom只能用
核心dom
r.x = 10? r.width = 100;? ? ? ? ? ? ? ? ? ? ? 無效
r.setAttribute("x",10); r.setAttibute("width":100); 有效
(4)動態(tài)添加svg圖形
? #html 字符串拼
? var html = "<rect></rect>";
? svg.innerHTML = html;
? #dom元素創(chuàng)建
? var rect =
? document.createElementNS("http://www.w3.org/2000/svg",
? ? "標簽名");
? svg.appendChild(rect);
