标签：
h5 canvas 画图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> $().ready(function () { var $c=$("#cans"); $c.bind(‘mousemove‘, function (event) { var x=event.clientX; var y=event.clientY; $("#res").text("坐标：x轴"+x+"坐标：y轴"+y); }); // 画矩形 var d=$c.get(0).getContext("2d"); //2d d.fillStyle="red"; //颜色 d.fillRect(0,0,100,100); // 矩形 d.fillStyle="rgba(0,0,255,0.5)"; //最后一个是程春明度 d.fillRect(200,0,100,100); // 画线 d.moveTo(110,110); //起始位置 d.lineTo(130,130); //终止位置 d.lineTo(155,120); // 如果没有再次设置起始位置则从终止位置继续画 d.stroke(); // 结束图形 // 圆 d.fillStyle="blue"; d.beginPath(); // 从新开始画，防止 冲突重叠 d.arc(100,200,30,0,Math.PI*2,true); // x y 坐标 半径30 d.closePath(); // 结束画布，防止冲突重叠 d.fill(); // 结束渲染 // 颜色渐变 var grd= d.createLinearGradient(250,250,375,250); // 颜色渐变的起始和终止坐标 grd.addColorStop(0,‘red‘); // 0 表示起点 0.1 0.2.。。1 表示终点 grd.addColorStop(0.8,‘green‘); grd.addColorStop(1,‘blue‘); d.fillStyle=grd; d.fillRect(250,250,375,250); // 设置色块 // 载入图形 chrome 不支持 var img=new Image() img.src="../img/logo.png" d.drawImage(img,200,30); }); </script> </head> <body> <canvas id="cans" width="500" height="500">浏览器不支持canvas</canvas> <div id="res"></div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/gyz418/p/5285243.html
