Canvas常用方法
# body中寫入canvas標(biāo)簽以便Js獲取
<body>
<canvas id="cans" width="300" height="300">
您的瀏覽器不支持canvas
</canvas>
</body>
<script>
var canvas=document.getElementById('cans');
var context=canvas.getContext("2d");
//繪制線條
context.beginPath();
context.moveTo(10, 30);
context.lineTo(50, 50);
context.moveTo(50, 50);
context.lineTo(100, 30);
context.lineWidth=2;
context.strokeStyle='#rrr';
context.lineJoin='bevel';
context.stroke();
context.closePath();
//繪制文本(空心 實(shí)心)
context.font="60px bold Arial";
context.textAlign='center';
context.textBaseLine='middle';
context.strokeStyle='blue';
context.strokeText('你好,嘉熙',50,210);
context.fillStyle='red';
context.fillText('你好,嘉熙',150,210);
//繪制矩形
context.fillStyle = '#f00';
context.fillRect(10,10,150,150);//填充矩形
context.strokeStyle = '#0f0';
context.strokeRect(50,50,150,150);//邊框矩形
context.clearRect(30,30,50,50);//清除矩形塊
//把canvas區(qū)域轉(zhuǎn)換成圖片url canvasBlock.toDataURL('imge/png')
var imgUrl=canvas.toDataURL('imge/png');
var oFragment = document.createDocumentFragment();//創(chuàng)建碎片節(jié)點(diǎn)
var img=document.createElement('img');
img.src=imgUrl;
oFragment.appendChild(img);
Element.appendChild(oFragment);
//創(chuàng)建漸變 (線性漸變)
var lin=context.createLinearGradient(x1,y1,x2,y2);
lin.addColorStop(0.2,'red');
lin.addColorStop(0.5,'blue');
lin.addColorStop(0.7,'pink');
lin.addColorStop(1,'yellow');
context.fillStyle=lin;
context.fillRect(10,10,100,100);
//繪制陰影
context.fillStyle='red';
context.shadowColor='rgba(210,210,210,.5)';
context.shadowOffsetX=25;
context.shadowOffsetY=5;
context.shadowBlur='red';
context.fillRect(100, 100, 100, 100);
//繪制圖像
context.drawImage(Element['Img'],0,0,300,300);
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
