canvas屬于客戶端技術(shù),圖片在服務(wù)器中,所有瀏覽器必須先下載
要繪制圖片,且等待圖片異步加載成功后繪制.
? 1:創(chuàng)建圖片對(duì)象? ? 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(弧度); 旋轉(zhuǎn)畫(huà)筆對(duì)象，軸點(diǎn)為畫(huà)布的原點(diǎn)
? ctx.translate(x,y); 將整個(gè)畫(huà)布的原點(diǎn)平移到指定點(diǎn)
? ctx.save();? ? ? 保存畫(huà)筆當(dāng)前所有狀態(tài)(角度/原點(diǎn)/顏色)<存盤>
? ctx.restore();? ? 恢復(fù)畫(huà)筆狀態(tài)到最近一次保存中? <讀取存盤>
?
3.3:html5新特性--svg
位圖:由一個(gè)又一個(gè)像素組成,每個(gè)點(diǎn)各有自己的顏色，色彩細(xì)膩,但是放大失真.
矢量圖:由一個(gè)又一個(gè)線條組成,每個(gè)線條指定顏色葱椭，方向抬驴，可以無(wú)限縮放找蜜，但是細(xì)節(jié)不夠豐富
SVG(可縮放的矢量圖)
canvas：2d位圖眷柔，js代碼繪圖翁巍，事件只能綁定畫(huà)布糟趾，適用于游戲
svg：2d矢量圖慌植，標(biāo)簽，事件可以綁定到元素
類型义郑，地圖應(yīng)用
? SVG 技術(shù)誕生2000年,早期作為XML的擴(kuò)展,H5把常用SVG標(biāo)簽
? 采納為標(biāo)準(zhǔn)蝶柿，但有一些廢棄.
? html-->xml ->html5
? 3.4:html5新特性--svg--矩形
? <svg id="" width="" height="">
? ? svg 畫(huà)布
? ? <rect? width="" height="" x="" y=""
? ? fill="" stroke="" fill-opacity="" stroke-opacity=""
? ? stroke-width=""></rect>
? </svg>
svg繪圖特點(diǎn)--著重注意
(1)所有圖形默認(rèn)只有填充色(黑色)沒(méi)有描邊色
(2)svg圖形的樣式可以用元素屬性方式聲明,也可以使用css
聲明,只能使用svg專用樣式，不能使用CSS樣式,
如邊框設(shè)置只能 stroke,不能用border
(3)圖形可以使用JS來(lái)對(duì)屬性賦值,但不能用html dom只能用
核心dom
r.x = 10? r.width = 100;? ? ? ? ? ? ? ? ? ? ? 無(wú)效
r.setAttribute("x",10); r.setAttibute("width":100); 有效
(4)動(dòng)態(tài)添加svg圖形
? #html 字符串拼
? var html = "<rect></rect>";
? svg.innerHTML = html;
? #dom元素創(chuàng)建
? var rect =
? document.createElementNS("http://www.w3.org/2000/svg",
? ? "標(biāo)簽名");
? svg.appendChild(rect);
