h5 canvas 画图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title< ...
h5 canvas 画图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src='/images/loading.gif' data-original="../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='/images/loading.gif' data-original="../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>
原标题:h5 canvas 画图
关键词:H5
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。