你的位置:首页 > 网页设计

[网页设计]h5 canvas 画图


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>