資訊專欄INFORMATION COLUMN
摘要：由像素點(diǎn)組成，以坐標(biāo)的中心繪制。如果是的線條，會(huì)被坐標(biāo)中心分成兩部分，每部分，瀏覽器無法顯示，所以顯示成淺色的粗線條。如果線條的寬度是偶數(shù)的，就不會(huì)有這種情況。最終路徑值的和是，則這個(gè)區(qū)域就不填充。
canvas 簡(jiǎn)介
canvas最早由Apple引入WebKit，用于Mac OS X 的Dashboard，后來又在Safari和Google Chrome中實(shí)現(xiàn)
基于gecko 1.8瀏覽器，比如Firefox 1.5，同樣支持這個(gè)元素
canvas元素是WhatWG Web application 1.0的一部分，也包含于HTML5
H5的canvas元素使用JavaScript在網(wǎng)頁上繪制圖像，默認(rèn)大小是300*150，可以自主設(shè)置寬高，不建議設(shè)置在style樣式中
瀏覽器解析的時(shí)候是圖片，可以控制每一像素
canvas不是塊級(jí)元素，所以居中的時(shí)候需要用display轉(zhuǎn)化一下
canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法
繪制步驟先獲取元素，之后獲取工具，再設(shè)置起始位置，之后繪制路徑，最后描邊
描邊過程可以設(shè)置線條顏色
再次繪制的時(shí)候會(huì)使用之前的樣式，后面的樣式覆蓋前面的
... ...繪制 基本繪制
線默認(rèn)是1px，黑色。canvas由像素點(diǎn)組成，以坐標(biāo)的中心繪制。如果是1px的線條，會(huì)被坐標(biāo)中心分成兩部分，每部分0.5px，瀏覽器無法顯示0.5px，所以顯示成淺色的粗線條。
如果線條的寬度是偶數(shù)的，就不會(huì)有這種情況。不過這種效果一般可以忽略。
beginPath表示重新繪制一條線，后面沒有設(shè)置的樣式會(huì)沿襲前邊線條的樣式
手動(dòng)閉合，會(huì)產(chǎn)生缺口效果
自動(dòng)閉合closePath
填充fill
不管是手動(dòng)閉合還是自動(dòng)閉合，或者是不封閉，都不會(huì)影響填充效果
兩端樣式用lineCap屬性設(shè)置，默認(rèn)是butt，還有round和square值，設(shè)置成后兩種的時(shí)候，線條會(huì)比默認(rèn)稍長
設(shè)置moveTo和lineTo，形成拐點(diǎn)，默認(rèn)樣式是miter，還有round和bevel值
漸變可以看成，線條中的每個(gè)像素分別設(shè)置顏色。那么漸變效果用遍歷線條中的每個(gè)像素就可以實(shí)現(xiàn)
遍歷一次，線條的起點(diǎn)moveTo和lineTo就會(huì)發(fā)生改變
線條/*1.獲取canvas元素*/
var canvas = document.querySelector("canvas");
/*2.獲取繪制環(huán)境 （獲取繪制工具）*/
/*content內(nèi)容 context 上下文 */
var ctx = canvas.getContext("2d");
/*3.設(shè)置起始繪圖的位置*/
ctx.moveTo(100,100);
/*6.設(shè)置寬度*/
ctx.lineWidth = 10;
/*4.繪制路徑 */
ctx.lineTo(200,100);
/*7. 設(shè)置描邊的顏色*/
ctx.strokeStyle = "red";
/*5.描邊*/
ctx.stroke();
平行線
/*1.獲取canvas元素*/
var canvas = document.querySelector("canvas");
/*2.獲取繪制環(huán)境 （獲取繪制工具）*/
/*content內(nèi)容 context 上下文 */
var ctx = canvas.getContext("2d");
/*3.設(shè)置起始繪圖的位置*/
ctx.moveTo(100,100);
/*6.設(shè)置寬度*/
ctx.lineWidth = 10;
/*4.繪制路徑 */
ctx.lineTo(200,100);
/*7. 設(shè)置描邊的顏色*/
ctx.strokeStyle = "red";
/*5.描邊*/
ctx.stroke();
/*綠色*/
/*再次繪制的時(shí)候 會(huì)使用之前設(shè)置的樣式 設(shè)置的樣式最后的會(huì)生效*/
/*開啟新路徑*/
ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(200,200);
ctx.strokeStyle = "green";
ctx.stroke();
三角形
var canvas = document.querySelector("canvas");
/*獲取繪圖工具*/
var ctx = canvas.getContext("2d"); /*3d目前還不支持*//*webgl*/
/*移動(dòng)畫筆*/
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
//ctx.lineWidth = 10;
/*自動(dòng)閉合*/
ctx.closePath();
//ctx.stroke();
//ctx.strokeStyle = "red";
//ctx.stroke();
/*填充*/
//ctx.fillStyle = "red";
ctx.fill();
鏤空矩形
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
/*1.獲取畫布的寬度和高度*/
//var width = canvas.width;
var width = ctx.canvas.width;
var height = ctx.canvas.height;
/*2.假設(shè)大容器 200*200*/
/*3.假設(shè)小容器 100*100*/
/*4. 計(jì)算起始位置*/
var x = width/2 - 100;
var y = height/2 -100;
ctx.moveTo(x,y);
ctx.lineTo(x+200,y);
ctx.lineTo(x+200,y+200);
ctx.lineTo(x,y+200);
ctx.lineTo(x,y);
/*第二個(gè)方形的方向需要是逆方向*/
var x1 = width/2 - 50;
var y1 = height/2 -50;
ctx.moveTo(x1,y1);
ctx.lineTo(x1,y1+100);
ctx.lineTo(x1+100,y1+100);
ctx.lineTo(x1+100,y1);
ctx.lineTo(x1,y1);
ctx.stroke();
ctx.fill();
線兩端
var canvas = document.querySelector("canvas");
/*獲取繪圖工具*/
var ctx = canvas.getContext("2d"); /*3d目前還不支持*//*webgl*/
ctx.lineWidth = 10;
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.strokeStyle = "red";
ctx.lineCap = "butt";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(200,200);
ctx.strokeStyle = "green";
ctx.lineCap = "round";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,300);
ctx.lineTo(200,300);
ctx.strokeStyle = "pink";
ctx.lineCap = "square";
ctx.stroke();
線拐點(diǎn)
var canvas = document.querySelector("canvas");
/*獲取繪圖工具*/
var ctx = canvas.getContext("2d"); /*3d目前還不支持*//*webgl*/
ctx.lineWidth = 10;
ctx.moveTo(100,100);
ctx.lineTo(150,150);
ctx.lineTo(200,100);
ctx.strokeStyle = "red";
ctx.lineJoin = "miter";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(150,250);
ctx.lineTo(200,200);
ctx.strokeStyle = "green";
ctx.lineJoin = "round";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,300);
ctx.lineTo(150,350);
ctx.lineTo(200,300);
ctx.strokeStyle = "pink";
ctx.lineJoin = "bevel";
ctx.stroke();
漸變線
var canvas = document.querySelector("canvas");
/*獲取繪圖工具*/
var ctx = canvas.getContext("2d"); /*3d目前還不支持*//*webgl*/
/*1.從左到右*/
/*2.起始顏色 白色*/
/*3.結(jié)束顏色 紅色*/
ctx.lineWidth = 10;
for (var i = 0; i < 255; i++) {
ctx.beginPath();
ctx.moveTo(99+i,100);
ctx.lineTo(100+i,100);
var g = 255 - i;
var b = 255 - i;
ctx.strokeStyle = "rgb(255,"+g+","+b+")";
ctx.stroke();
}
虛線
用setLineDash設(shè)置虛線
傳入一個(gè)數(shù)組，數(shù)組中的數(shù)據(jù)依次表示實(shí)點(diǎn)空白
如果傳入的是奇數(shù)個(gè)數(shù)據(jù)，比如5,10,15，
那么表示實(shí)點(diǎn)5、空白10、實(shí)點(diǎn)15、空白5、實(shí)點(diǎn)10、空白15
奇數(shù)總會(huì)轉(zhuǎn)換成偶數(shù)個(gè)數(shù)據(jù)
另外虛線還有偏移量，負(fù)值表示向右偏移
var canvas = document.querySelector("canvas");
/*獲取繪圖工具*/
var ctx = canvas.getContext("2d"); /*3d目前還不支持*//*webgl*/
ctx.moveTo(100,100);
ctx.lineTo(500,100);
/*繪制虛線的方法*/
/*傳數(shù)組 設(shè)置虛線長度的*/
ctx.setLineDash([5,10]);
/*offset表示位移*/
ctx.lineDashOffset=5;
/*如果是偶數(shù)個(gè)數(shù)設(shè)置 */
/*如果是奇數(shù)數(shù)個(gè)數(shù)設(shè)置 */
/*獲取的不重復(fù)的一段*/
console.log(ctx.getLineDash());
ctx.stroke();
非零繪制原則
從某區(qū)域伸出一條線，經(jīng)過這條線的路徑，順時(shí)針方向+1，逆時(shí)針方向-1。最終路徑值的和是0，則這個(gè)區(qū)域就不填充。
S1區(qū)域，L1伸出來，與一條線交叉，這條線是逆時(shí)針，-1
S2區(qū)域，L2伸出來，與兩條線交叉，兩條線都是逆時(shí)針，-1+(-1)=-2
S3區(qū)域，L3伸出來，與兩條線交叉，一條是逆時(shí)針，一條是順時(shí)針。-1+(+1)=0
非零填充，為零不填充
矩形所有的方法中，前兩個(gè)參數(shù)表示相對(duì)于canvas坐標(biāo)，x和y，后兩個(gè)參數(shù)表示矩形的大小，長和寬
rect沒有自己獨(dú)立的路徑，設(shè)置完坐標(biāo)和大小時(shí)候，還需要手動(dòng)描邊或填充
strokeRect和fillRect都有自己的路徑，可以直接生成矩形，一個(gè)標(biāo)識(shí)描邊生成，另一個(gè)是填充生成
clearRect清除繪制內(nèi)容
var canvas=document.querySelector("canvas");
var ctx=canvas.getContext("2d");
ctx.rect(100,100,20,100);
ctx.strokeRect(200,100,20,100);
ctx.fillRect(300,100,20,100);
ctx.clearRect(210,100,20,100);
ctx.stroke();
漸變方案
createLinearGradient前兩個(gè)參數(shù)表示起點(diǎn)的坐標(biāo)，后兩個(gè)參數(shù)表示終點(diǎn)坐標(biāo)
addColorStop表示顏色的設(shè)置，第一個(gè)參數(shù)表示占據(jù)位置，第二個(gè)參數(shù)是顏色
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
/*漸變的方案*/
var linearGradient = ctx.createLinearGradient(100,150,300,150);
/* 0-1 0-100% */
linearGradient.addColorStop(0,"red");
linearGradient.addColorStop(0.5,"blue");
linearGradient.addColorStop(1,"yellow");
ctx.fillStyle = linearGradient;
ctx.fillRect(100,100,200,100);
曲線
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
/*1.線都是由點(diǎn)構(gòu)成*/
var yy = 0;
for (var i = 0; i < 600; i++) {
var x = i;
/*y會(huì)隨著公式去計(jì)算*/
//var y = 2*x;
var y = Math.pow(x+2,2);
//var y = Math.sin(x/20)*100 + 300;
ctx.beginPath();
ctx.moveTo(x,yy);
ctx.lineTo(x+1,y);
yy = y;
ctx.stroke();
}
圓弧
圓弧繪制arc方法有六個(gè)參數(shù)
前兩個(gè)參數(shù)表示圓心的坐標(biāo)，第三個(gè)參數(shù)表示圓弧的半徑，第四個(gè)參數(shù)表示開始的弧度，第五個(gè)參數(shù)表示結(jié)束的弧度，第六個(gè)參數(shù)表示繪制方向，默認(rèn)值是false順時(shí)針
一個(gè)弧度的長度等于半徑的長度，一個(gè)周長等于2*π個(gè)弧度
周長是2Math.PIr，一個(gè)角度就是Math.PI/180
順時(shí)針轉(zhuǎn)是正方向，是正值。逆時(shí)針轉(zhuǎn)是負(fù)方向是負(fù)值
var canvas=document.querySelector("canvas");
var ctx=canvas.getContext("2d");
ctx.arc(100,100,60,0,2*Math.PI,false);
ctx.stroke();
文本
文本設(shè)置，font設(shè)置字體樣式和大小
strokeText表示字體描邊，fillText表示字體填充，這兩個(gè)方法有四個(gè)參數(shù)，第一個(gè)參數(shù)表示要表示出來的文本，第二個(gè)和第三個(gè)參數(shù)表示坐標(biāo)（文本的左下角），第四個(gè)參數(shù)表示文本最大寬度，可以不設(shè)置
textAlign表示文本左右方向的對(duì)齊方式，有l(wèi)eft，right，center，start，end...
textBaseline表示文本上下的對(duì)齊方式，有top，middle，bottom，alphabetic（默認(rèn)值）
measureText方法獲取文本的寬度
文本的對(duì)齊都是相對(duì)于坐標(biāo)點(diǎn)來確定的
如果設(shè)定起始點(diǎn)的坐標(biāo)是(100,100)那么向右對(duì)齊的時(shí)候，文本會(huì)出現(xiàn)在(100,100)的左邊，上下方式的對(duì)齊方式同理
var canvas=document.querySelector("canvas");
var ctx=canvas.getContext("2d");
ctx.font = "微軟雅黑"
ctx.stroke();
ctx.fillText("內(nèi)容內(nèi)容",100,100,150);
圖片
創(chuàng)建一個(gè)存在于內(nèi)存中的圖片，有下面兩種方式
文檔中創(chuàng)建元素，設(shè)定元素的路徑等屬性
使用Img對(duì)象new一個(gè)圖片
在IE瀏覽器中，圖片加載之后會(huì)有緩存，在onload的時(shí)候圖片可能已經(jīng)加載出來了，所以要把獲取圖片的語句放在onload之后
canvas中繪制圖片有三種方式
第一種，三個(gè)參數(shù)
參數(shù)一，圖片對(duì)象。參數(shù)二，坐標(biāo)x。參數(shù)三，坐標(biāo)y。
第二種，五個(gè)參數(shù)
參數(shù)一，圖片對(duì)象。參數(shù)二，坐標(biāo)x。參數(shù)三，坐標(biāo)y。參數(shù)四，圖片寬。參數(shù)五，圖片高。
第三種，九個(gè)參數(shù)
參數(shù)一，圖片對(duì)象。參數(shù)二，圖片x軸定位。參數(shù)三，圖片y軸定位。參數(shù)四，截取圖片寬度。參數(shù)五，截取圖片高度。參數(shù)六，繪制x坐標(biāo)。參數(shù)七，繪制y坐標(biāo)。參數(shù)八，繪制圖片寬度。參數(shù)九，繪制圖片高度。
/*img元素也有onload事件*/
/*document.querySelector("img").onload = function () {
console.log("加載完成");
}*/
/*怎么動(dòng)態(tài)創(chuàng)建一個(gè)圖片元素*/
/*這個(gè)元素在內(nèi)存里面*/
var img = document.createElement("img");
img.src = "images/01.jpg";
img.onload = function () {
console.log(img);
}
/*使用Image對(duì)象*/
var img1 = new Image();
img1.onload = function () {
console.log(img1);
}
img1.src = "images/01.jpg";
/*補(bǔ)充：兼容問題*/
/*IE onload必須先綁定*/
精靈圖
從一大張精靈圖中截取需要的部分
獲取畫布的寬高，令圖片居中顯示
九個(gè)參數(shù)中，獲取img對(duì)象，在圖片的(40,195)的位置截取圖片，截取圖片的大小是40X65，放在畫布的(startX,startY)的位置，在畫布中顯示大小是40X65
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var startX = width/2-20;
var startY = height/2-32.5;
/*繪制*/
ctx.drawImage(img,40,195,40,65,startX,startY,40,65);
}
img.src = "images/03.png";
幀動(dòng)畫
獲取畫布大小，獲取人物大小，得到繪制的起點(diǎn)
設(shè)置索引值初始值為0，代表行列中的第幾個(gè)圖片
繪制圖片，在圖片(0,0)位置截取圖片，截取大小是人物大小，畫布中繪制起點(diǎn)就是之前計(jì)算得到的結(jié)果，圖片大小是人物大小。
設(shè)置一個(gè)定時(shí)器，令index自加，如果index加到3，歸零
繪制圖片之前先清除之前的圖片，清除的起點(diǎn)是繪制圖片的起點(diǎn)，清除范圍的大小是人物的大小
繪制新圖片，截取位置的x方向長度是索引和人物寬度的乘積，y方向就是最后一行的坐標(biāo)195，圖片截取大小就是人物大小，開始位置就是繪制起始位置，畫布中圖片顯示大小就是人物大小
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
/*畫布大小*/
var width = ctx.canvas.width;
var height = ctx.canvas.height;
/*人物大小*/
var perWidth = img.width/4;
var perHeight = img.height/4;
/*繪制起點(diǎn)*/
var startX = width/2-perWidth/2;
var startY = height/2-perHeight/2;
/*繪制*/
/*圖片的索引*/
var index = 0;
ctx.drawImage(img,0,0,perWidth,perHeight,startX,startY,perWidth,perHeight);
setInterval(function () {
index ++;
if(index > 3){
index = 0;
}
/*繪制之前清除之前的圖片*/
ctx.clearRect(startX,startY,perWidth,perHeight);
ctx.drawImage(img,index*perWidth,195,perWidth,perHeight,
startX,startY,perWidth,perHeight);
},100);
}
img.src = "images/03.png";
轉(zhuǎn)換坐標(biāo)軸
CSS中translate 在移動(dòng)的是元素
Canvas中 translate移動(dòng)的事坐標(biāo)軸
CSS中rotate旋轉(zhuǎn)繞元素中心轉(zhuǎn)，坐標(biāo)軸方向發(fā)生改變
Canvas中 rotate旋轉(zhuǎn)繞坐標(biāo)軸原點(diǎn)，坐標(biāo)軸方向發(fā)生改變
Canvas 中scale x軸的縮放 y軸的縮放 并不是元素的縮放
保存和恢復(fù)保存和恢復(fù)，保存多個(gè)系列，先保存的后被拿出，后保存的先被拿出。棧
如果先保存一個(gè)紅色寬30，再保存一個(gè)綠色寬20，之后恢復(fù)的時(shí)候，會(huì)先恢復(fù)
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 30;
ctx.strokeStyle = "red";
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.stroke();
/*保存一系列樣式*/
/*保存多個(gè)系列樣式*/
/*存儲(chǔ)結(jié)構(gòu)是棧 后進(jìn)先出*/
ctx.save();
ctx.beginPath();
ctx.lineWidth = 20;
ctx.strokeStyle = "green";
ctx.moveTo(100,200);
ctx.lineTo(300,200);
ctx.stroke();
ctx.save();
ctx.beginPath();
ctx.restore();
ctx.moveTo(100,300);
ctx.lineTo(300,300);
ctx.stroke();
ctx.beginPath();
ctx.restore();
ctx.moveTo(100,400);
ctx.lineTo(300,400);
ctx.stroke();
實(shí)例
刮刮樂
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
/*填充方案*/
var pat = ctx.createPattern(img,"no-repeat");
/*圖片描邊*/
ctx.strokeStyle = pat;
/*設(shè)置線的樣式*/
ctx.lineWidth = 25;
ctx.lineCap = "round";
ctx.lineJoin = "round";
var isDown = false;
ctx.canvas.addEventListener("mousedown",function (e) {
/*設(shè)置起始坐標(biāo)*/
ctx.moveTo(e.clientX,e.clientY);
isDown = true;
})
ctx.canvas.addEventListener("mousemove",function (e) {
if(isDown){
ctx.lineTo(e.clientX,e.clientY);
ctx.stroke();
}
})
ctx.canvas.addEventListener("mouseup",function () {
isDown = false;
})
}
img.src = "images/05.jpg";
鍵盤控制人物移動(dòng)
var Per = function () {
this.ctx = document.querySelector("canvas").getContext("2d");
this.width = this.ctx.canvas.width;
this.height = this.ctx.canvas.height;
this.stepSize = 10;
this.index = 0;
}
Per.prototype.init = function () {
var that = this;
that.loadImage(function (img) {
that.perWidth = img.width/4;
that.perHeight = img.height/4;
that.startX = that.width/2-that.perWidth/2;
that.startY = that.height/2-that.perHeight/2;
that.drawPer(img,0,0,0);
that.bindEvent(img);
})
}
/*圖片加載*/
Per.prototype.loadImage = function (callback) {
var img = new Image();
img.onload = function () {
/*完成其他業(yè)務(wù)*/
callback && callback(img);
}
img.src = "images/04.png";
}
/*事件綁定*/
Per.prototype.bindEvent = function (img) {
var that = this;
/*按鍵編碼 左上右下 37 38 39 40*/
/* 0 1 2 3*/
var direction = 0;
var stepX = 0;
var stepY = 0;
document.addEventListener("keydown",function (e) {
console.log(e.keyCode);
switch(e.keyCode){
case 37:
/*左*/
stepX --;
direction = 1;
break;
case 38:
/*上*/
stepY --;
direction = 3;
break;
case 39:
/*右*/
stepX ++;
direction = 2;
break;
case 40:
/*下*/
stepY ++;
direction = 0;
break;
}
that.index ++;
/*繪制*/
that.drawPer(img,stepX,stepY,direction);
})
}
/*繪制人物*/
Per.prototype.drawPer = function (img,stepX,stepY,direction) {
/*清空*/
this.ctx.clearRect(0,0,this.width,this.height);
if(this.index > 3){
this.index = 0;
}
/*繪制*/
this.ctx.drawImage(img,this.perWidth*this.index,direction*this.perHeight,
this.perWidth,this.perHeight,
this.startX+(stepX*this.stepSize),this.startY+(stepY*this.stepSize),
this.perWidth,this.perHeight);
}
new Per().init();
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96957.html
摘要：本次技術(shù)調(diào)研來源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長按網(wǎng)頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術(shù)調(diào)研來源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長按網(wǎng)頁保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開，長按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁的結(jié)尾頁分享。以下則是項(xiàng)目中...
摘要：本次技術(shù)調(diào)研來源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長按網(wǎng)頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術(shù)調(diào)研來源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長按網(wǎng)頁保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開，長按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁的結(jié)尾頁分享。以下則是項(xiàng)目中...
摘要：本次技術(shù)調(diào)研來源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長按網(wǎng)頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術(shù)調(diào)研來源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長按網(wǎng)頁保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開，長按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁的結(jié)尾頁分享。以下則是項(xiàng)目中...
摘要：本次技術(shù)調(diào)研來源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長按網(wǎng)頁保存為截圖。小結(jié)是目前實(shí)現(xiàn)網(wǎng)頁保存為圖片功能的綜合最佳選擇。 本次技術(shù)調(diào)研來源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長按網(wǎng)頁保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開，長按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁的結(jié)尾頁分享。以下則是項(xiàng)目中調(diào)研和踩坑的一些小結(jié)和匯總。 ...
摘要：本次技術(shù)調(diào)研來源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長按網(wǎng)頁保存為截圖。小結(jié)是目前實(shí)現(xiàn)網(wǎng)頁保存為圖片功能的綜合最佳選擇。 本次技術(shù)調(diào)研來源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長按網(wǎng)頁保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開，長按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁的結(jié)尾頁分享。以下則是項(xiàng)目中調(diào)研和踩坑的一些小結(jié)和匯總。 ...
摘要：本次技術(shù)調(diào)研來源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長按網(wǎng)頁保存為截圖。小結(jié)是目前實(shí)現(xiàn)網(wǎng)頁保存為圖片功能的綜合最佳選擇。 本次技術(shù)調(diào)研來源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長按網(wǎng)頁保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開，長按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁的結(jié)尾頁分享。以下則是項(xiàng)目中調(diào)研和踩坑的一些小結(jié)和匯總。 ...
閱讀 1050·2021-11-25 09:43
閱讀 1695·2019-08-30 13:59
閱讀 1665·2019-08-30 11:22
閱讀 2160·2019-08-30 11:06
閱讀 1328·2019-08-28 17:51
閱讀 3775·2019-08-26 12:12
閱讀 808·2019-08-26 12:11
閱讀 477·2019-08-26 12:10
