<img_rc="......."_d="img1"/>
<img_rc="......."_d="img2"/>
<img_d="img3"/>
var_mg1=("img1"),
__img2=("img2"),
__img3=("img3");
var_anvas=("canvas"),
__context=("2d");
=_+;
=(,);
//__img1_尤牖
(img1,0,0,,);
//__img2_尤牖
(img1,,0,,);
//_寄諶蕕汲
var_rc=();
=_rc;
<p>drawImage_氖褂梅椒?梢勻フ飫錕匆幌</p>
<a_ref=""/>
canvas加入代碼是什麽1.原生canvas實現用到的API
1)getContext(contextID)---返回壹個用於在畫布上繪圖的環境
復制代碼代碼如下:('2d')//返回壹個CanvasRenderingContext2D對象,使用它可以繪制到Canvas元素中
2)drawImage
drawImage(imgObj,x,y)//按原圖大小繪制,x、y為圖片在畫布中的位置坐標drawImage(imgObj,x,y,width,height)//按指定寬高繪制drawImage(imgObj,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)//從原來圖片上某壹個位置開始(sourceX,sourceY),指定長寬進行剪切(sourceWidth,sourceHeight),然後將剪切的內容放到位置為(destX,destY),寬度為(destWidth),高度為(destHeight)的位置上
3)getImageData(x,y,width,height)---獲取矩形區域的圖像信息
(0,0,10,10)//獲取左上角坐標為(0,0),寬高為區域內的圖像信息//返回ImageData:{width:10,height:10,data:Uint8ClampedArray[400]}
4)beginPath()---開始壹條路徑,或重置當前的路徑5)rect(x,y,width,height)---繪制矩形
6)lineWidth---設置或返回當前線條的寬度
7)fillStyle---設置或返回用於填充繪畫的顏色、漸變或模式
=color|gradient|pattern
8)strokeStyle---設置或返回用於筆觸的顏色、漸變或模式
9)globalAlpha---設置或返回繪圖的當前透明值
10)fill()---填充當前的圖像(路徑)。默認顏色是黑色
註如果路徑未關閉,那麽fill()方法會從路徑結束點到開始點之間添加壹條線,以關閉該路徑,然後填充該路徑。
11)stroke()---會實際地繪制出通過moveTo()和lineTo()方法定義的路徑。默認顏色是黑色
12)toDataURL(type,encoderOptions)---導出圖片,type為圖片類型,encoderOptions圖片質量,[0,1]
("image/png",1)
2.
簡化canvas編寫的庫,為canvas提供所缺少的對象模型
能做的事
1)在canvas上創建、填充圖形(包括圖片、文字、規則圖形和復雜路徑組成圖形)
2)給圖形填充漸變顏色
3)組合圖形(包括組合圖形、圖形文字、圖片等)
4)設置圖形動畫集用戶交互
5)生成JSON,SVG數據等
3.使用實現用到的API
1)聲明畫布
letcanvas=new('canvas'){width:200,height:200}
插入圖片
letimgInstance=new(imgElement,{left:0,top:0,width:100,height:100,angle:0}
3)設置背景圖片setBackgroundImage
(imgInstance)
4)renderAll()重新繪制
5)on()用戶交互
('mouse:down',function(options){(options.e.clientX,options.e.clientY)})//監聽事件
6)getPointer()
7)setWidth()、setHeight()設置canvas的寬高
8)畫矩形
letrect=new({left:0,top:0,width:100,height:100})
add(obj)添加圖形
(rect)
10)remove(obj)移除圖形
11)set()設置對象內容
12)toDataURL(obj)
4.原生canvas實現代碼
<template><divclass="container"><divclass="operations"><ul><li@click="mosaic">馬賽克</li><li@click="addText">添加文字</li><li@click="tailor">裁剪</li><li@click="rotate">旋轉</li><li@click="exportImg">導出圖片</li></ul></div><canvasref="imgContent"class="img-wrap">妳的瀏覽器太low</canvas></div></template><script>exportdefault{data(){return{context:'',canvas:'',isMasic:false,isText:false,isTailor:false,isTranslate:false,squareEdgeLength:20,angle:0,img:''}},mounted(){()},methods:{initData(){letimgContent=this.$=imgContent=('2d')letImg=newImage()=Img="Anonymous"='
'('width',)('height',)letself=this=()=>{letbeginX,beginY,endX,endY(Img,0,0)()('mousedown',e=>{beginX=e.offsetXbeginY=e.offsetY('mouseup',e=>{endX=e.offsetXendY=e.offsetYif(){(beginX,beginY,endX-beginX,endY-beginY)return}if(){(Img,beginX,beginY,endX-beginX,endY-beginY,0,0,endX-beginX,endY-beginY)return}})})}},drawRect(x,y,width,height,fillStyle,lineWidth,strokeStyle,globalAlpha){()(x,y,width,height)=lineWidth=strokeStylefillStyle&&(=fillStyle)globalAlpha&&(=globalAlpha)()()},//打馬賽克mosaic(){letself=this()=true},makeGrid(beginX,beginY,rectWidth,rectHight){constrow=(rectWidth/)+1constcolumn=(rectHight/)+1for(leti=0;i<row*column;i++){letx=(i%row)*+beginXlety=parseInt(i/row)*+beginY(x,y)}},setColor(x,y){constimgData=(x,y,,).dataletr=0,g=0,b=0((x,y,,),(imgData))for(leti=0;i<;i+=4){r+=imgData[i]g+=imgData[i+1]b+=imgData[i+2]}r=(r/(/4))g=(g/(/4))b=(b/(/4))(x,y,,,`rgb(${r},${g},${b})`,2,`rgb(${r},${g},${b})`)},//添加文字addText(){()=true('添加文字')},//裁剪tailor(){()=true('裁剪')},//旋轉rotate(){//if(===360){//=90//}else{//+=90//}//if([90,270].includes()){//('width',)//('height',)//}else{//('width',)//('height',)//}constx=/2consty=/2(0,0,,)//清理畫布內容(x,y)(90*/180)(-x,-y)(,0,0)},resetClickStatus(){=false=false=false=false},exportImg(){()constexportUrl=("image/jpeg")leta=('a')a.setAttribute('download','')a.href=exportUrl(a)a.click()}}}</script><stylescopedlang="less">.operations{width:1200px;margin:0auto;ul{display:flex;align-items:center;margin-bottom:30px;li{list-style:none;margin-right:20px;cursor:pointer;}}}.img-wrap{display:block;margin:0auto;}</style>
html5中canvas畫的圖形如何打印以及導出pdf？JScriptcodevarcanvas=("mycanvas");
varimg=("image/png");
('<imgsrc="'+img+'"/>');
打印是瀏覽器的事。用JS調用也是調用瀏覽器的功能,這種情況直接按CTRL+P去處理。至於PDF,裝軟件,只要能打印的都可以通過軟件生成PDF。
若想在HTML5裏用純代碼實現導出PDF是實現不了的。