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); // 设置色块 // 载入图形 var img=new Image() img.src="../img/logo.png"
//等图像 加载完毕，再绘制图像
img.onload= function () {
//d.drawImage(img,200,30); // 加载图片
// 背景图片平铺
var pattern = d.createPattern(img, "repeat");
//2、将返回值设置给fillStyle属性
d.fillStyle = pattern;
//3、填充矩形
d.fillRect(0, 0, 400, 300);
}
//切割图像
d.beginPath();
d.arc(150,150,50,0,Math.PI * 2 , true);
d.closePath();
d.clip();
}); </script> </head> <body> <canvas id="cans" width="500" height="500">浏览器不支持canvas</canvas> <div id="res"></div> </body> </html>
h5画图 补充
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>day04 pm 完</title> <style> </style> <script src="js/jquery.min.js"></script> <script> $().ready(function () { var can=$("#canvas").get(0); //转成 dom 操作 d=can.getContext("2d"); d.fillStyle="red"; //填充颜色 d.strokeStyle='green'; // 线条颜色 d.strokeRect(50,50,100,100); //边框矩形 d.fillRect(60,60,80,80); // 实心矩形 d.clearRect(70,70,60,60); //擦除矩形 // 封闭的三角形 d.beginPath(); // 添加 beginPath() closePath() 就可以形成封闭图形 d.moveTo(110,110); //起始位置 d.lineTo(130,130); //终止位置 d.lineTo(155,120); // 如果没有再次设置起始位置则从终止位置继续画 d.closePath(); d.fillStyle="blue"; d.stroke(); // 结束图形 d.fill(); // 左半圆 d.fillStyle="green"; d.beginPath(); // 从新开始画，防止 冲突重叠 d.arc(100,200,30,Math.PI/2,Math.PI*3/2,false); // x y 坐标 半径30 位置 上 PI*3/2 右 0 / 2PI 下 pi/2 左 pi true false表示顺时针或逆时针 d.closePath(); // 结束画布，防止冲突重叠 d.fill(); // 结束渲染 //任意矩形 $("#btn").click(function () { var x=parseInt(Math.random()*500); var y=parseInt(Math.random()*400); d.fillRect(x,y,100,100); }); // 缩放 $("#btnScale").click(function () { d.scale(1.2,1.2); //放大1.2倍 要再画矩形才有效果 // d.translate(100,100); // d.save(); // 保存扩大缩小等的状态 // d.restore(); // 恢复状态 }); }); </script> </head> <body> <canvas id="canvas" width="800" height="500" style="border:1px solid green;"> 不支持 canvas </canvas> <br> <button type="button" id="btn">button</button> <button type="button" id="btnScale">btnScale</button> </body> </html>
html5绘制文字
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js"></script> <script> $(function () { var canvas = $("#canvas").get(0); var d = canvas.getContext("2d"); d.lineWidth=1; d.strokeStyle='green'; d.font = "bold 24px 微软雅黑"; d.strokeText("你好,世界!",20,20); //空心文字轮廓 d.fillText("你好,世界!",125,125); // 文字 //阴影文字 d.shadowColor="red"; //阴影 d.shadowOffsetX=5; // 偏移 d.shadowOffsetY=5; // d.shadowBlur=5; // 阴影模糊效果 d.font = "bold 24px 微软雅黑"; d.fillText("微软雅黑!",35,50); }); </script> </head> <body> <canvas id="canvas" width="800" height="300"></canvas> </body> </html>
html5 线条粗细 张条线冒
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js"></script> <script> $(function () { var canvas=$("#canvas").get(0); var d=canvas.getContext("2d"); //线条粗细 lineWidth:1 // 线条线冒： lineCap:butt round square d.lineWidth=6; // 线条粗细 d.lineCap='round'; //头尾圆角 //d.lineJoin='round'; // 线条连接处圆角 d.lineJoin='miter'; // 两条线形成的锐角长度，默认为10 d.miterLimit=8; d.strokeStyle='green'; d.moveTo(110,110); //起始位置 d.lineTo(150,150); //终止位置 d.lineTo(125,100); // 如果没有再次设置起始位置则从终止位置继续画 d.stroke(); // 结束图形 }); </script> </head> <body> <canvas id="canvas" ></canvas> </body> </html>