H5 API-Canvas
2018-04-08 本文已影响0人
嘉熙i
Canvas常用方法
# body中写入canvas标签以便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();
//绘制文本(空心 实心)
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区域转换成图片url canvasBlock.toDataURL('imge/png')
var imgUrl=canvas.toDataURL('imge/png');
var oFragment = document.createDocumentFragment();//创建碎片节点
var img=document.createElement('img');
img.src=imgUrl;
oFragment.appendChild(img);
Element.appendChild(oFragment);
//创建渐变 (线性渐变)
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>
