标签:style blog 使用 os width 2014
在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字。
在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题,可以在每次重新画一个图时重新开启路径,画完后关闭路径。
这些代码是在猎豹浏览器上实现的,有些浏览器可能不支持。
<!DOCTYPE html> <meta charset="utf-8"> <html> <body> <canvas width="500" height="500" id="canvas" style="background:yellow"> 您的浏览器不支持canvas </canvas> <script> //获取画布 var canvas=document.getElementById(‘canvas‘); //alert(canvas); //设置绘图环境 var cxt=canvas.getContext(‘2d‘); //画一条线段 //开始新路径,第一笔可以不写 cxt.beginPath(); //设置画笔宽度 cxt.lineWidth=4; //设置画笔颜色 cxt.strokeStyle="red"; //笔从哪开始画 cxt.moveTo(20,20); //给出终点 cxt.lineTo(100,20); //开始画 cxt.stroke(); //封闭路径 cxt.closePath(); //画空心圆 //开始新路径 cxt.beginPath(); //路径函数 x,y,r,角度范围,顺时针/逆时针 cxt.arc(100,100,50,0,360,false); cxt.stroke(); cxt.closePath(); //画实心圆 cxt.beginPath(); //设置填充颜色 cxt.fillStyle="blue"; cxt.arc(100,200,50,0,360,false); //实心 cxt.fill(); //在画个圆,不填充,加边框,可不画 cxt.stroke(); cxt.closePath(); //画矩形 //矩形函数 x,y,长宽 cxt.beginPath(); cxt.rect(200,100,50,60); cxt.stroke(); cxt.closePath(); //其他方法 cxt.beginPath(); cxt.strokeRect(200,190,120,20); cxt.closePath(); //实心矩形 cxt.beginPath(); cxt.rect(200,220,50,50); cxt.fill(); cxt.closePath(); //其他方法 cxt.fillRect(200,280,50,50); //写字 cxt.font="40px 黑体 "; //实心字 cxt.fillText("暗伤无痕",300,50); //空心字 //将笔触调细 cxt.lineWidth="1"; cxt.strokeText("暗伤无痕",300,100); //将图片画到画板上 猎豹不支持 var img=new Image(); img.src="1.jpg"; cxt.drawImage(img,300,400,100,100); //画一个三角形 cxt.beginPath(); //移动至开始点 cxt.moveTo(300,100); cxt.lineTo(300,200); cxt.lineTo(350,150); cxt.closePath();//三角形需要先闭合路径再画 //空心 //cxt.stroke(); //实心 cxt.fill(); //旋转图片 //设置旋转环境 cxt.save(); //在异次元空间重置0,0点位置 cxt.translate(20,20); //图片/x形状旋转 //设置旋转角度 参数是弧度,角度 0--360 弧度角度*Math.PI/180 // cxt.rotate(-30*Math.PI/180); //旋转线段 cxt.beginPath(); cxt.lineWidth=4; cxt.moveTo(0,0); cxt.lineTo(20,100); cxt.stroke(); cxt.closePath(); //将旋转后的图片返回原画布 cxt.restore(); </script> </body> </html>
玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能),码迷,mamicode.com
玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能)
标签:style blog 使用 os width 2014
原文地址:http://blog.csdn.net/u012116457/article/details/24663905