一波HTML5 Canvas基礎繪圖實例代碼集合

2020-03-24 18:59:01

字體：大中小

來源：轉載

供稿：網友

varcanvas=document.getElementById('canvas'); if(canvas.getContext){ varcontext=canvas.getContext('2d'); //線寬 context.lineWidth=4; //畫筆顏色 context.strokeStyle='red'; //填充色 context.fillStyle= red ; //線帽類型 context.lineCap='butt';//round,square //開始路徑 context.beginPath(); //起點 context.moveTo(10,10); //終點 context.lineTo(150,50); //繪制 context.stroke(); ｝
varcanvas=document.getElementById('canvas'); if(canvas.getContext){ context.beginPath(); context.strokeRect(10,10,70,40); //矩形的另一種方式 context.rect(10,10.70,40); context.stroke(); //實心矩形 context.beginPath(); context.fillRect(10,10,70,40); //另一種方式實心矩形 context.beginPath(); context.rect(10,10,70,40); context.fill(); ｝
varcanvas=document.getElementById('canvas'); if(canvas.getContext){ context.beginPath(); //圓中心坐標x,圓中心坐標Y,圓弧半徑，起始角度，終止角度，是否逆時針 //第4個參數和第五個參數是要傳入的弧度，如果畫30角度，需要將其轉化為弧度30*Math.PI/180 context.arc(100,100,70,0,130*Math.PI/180,true); context.stroke(); context.fill(); ｝
varcanvas=document.getElementById('canvas'); if(canvas.getContext){ context.beginPath(); context.moveTo(20,20); context.lineTo(70,20); //為一條路徑畫弧度p1.xp1.yp2.x,p2.y弧半徑， context.arcTo(120,30,120,70,50); context.lineTo(120,120); context.stroke(); //擦除canvas畫板 context.beginPath(); context.fillRect(10,10,200,100); //擦除區域 context.clearRect(30,30,50,50); ｝
varcanvas=document.getElementById('canvas'); if(canvas.getContext){ context.beginPath(); context.moveTo(100,100); context.quadraticCurveTo(20,50,200,20); context.stroke(); ｝
varcanvas=document.getElementById('canvas'); if(canvas.getContext){ context.moveTo(68,130); varcX1=20; varcY1=10; varcX2=268; varcY2=10; varendX=268; varendY=170; context.bezierCurveTo(cX1,cY1,cX2,cY2,endX,endY); context.stroke(); //利用clip指定繪圖區域，指定繪圖區域之后，只能在繪圖區域中進行繪圖擦歐總 //繪制圓形 context.arc(100,100,40,0,360*Math.PI/180,true); //限制區域 context.clip(); //開始嘗試繪制其他 context.beginPath(); context.fillStyle='lightblue'; //結果矩形并沒有顯示出來 context.fillRect(0,0,300,150); }
varcanvas=document.getElementById('canvas'); if(canvas.getContext){ varcontext=canvas.getContext('2d'); /* *drawImage(image,dx,dy) *drawImage(image,dx,dy,dw,dh) *drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh); *image繪圖對象 *dxdycanvas的坐標 *dw，dh表示image在canvas中即將繪圖的位置 *sw，sh表示image所要繪圖的區域 *sx,sy所要繪圖的開始位置 */ varimage=document.getElementById('img'); context.drawImage(image,0,0); varimg=newImage(); img.src='images/1.jpg'; img.onload=function(){ //drawImage //從0,0坐標開始繪制 //context.drawImage(img,0,0); //從0，0開始,繪制整張圖到100,100長寬 //context.drawImage(img,0,0,100,100); //截圖,50,50到100,100從260,130開始繪制，放到100,100長寬區域中 //context.drawImage(img,50,50,100,100,260,130,100,100); //利用getImageData和putImageData繪制圖片 context.drawImage(img,10,10); //從畫板上獲取像素數據 //開始位置，結束位置 varimgData=context.getImageData(50,50,100,100); //將數據畫到畫板指定位置坐標 context.putImageData(imgData,10,260); //將所去的像素數據一部分，畫到畫板上 context.putImageData(imgData,200,260,50,50,100,100); //createImageData創建像素 varimgData=context.getImageData(50,50,200,200); //創建指定大小的空對象 varimgData01=context.createImageData(imgData); for(i=0;i imgData01.width*imgData01.height*4;i+=4){ //紅色像素 imgData01.data[i+0]=255; imgData01.data[i+1]=0; imgData01.data[i+2]=0; imgData01.data[i+3]=255; } context.putImageData(imgData01,10,260); } }html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：淺析移動設備HTML5頁面布局

下一篇：HTML5如何實現元素拖拽