标签：style blog http color os java ar 2014 div
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <canvas width ="800" height="500" style=" background:yellow" id="canvas"></canvas> <script type="text/javascript"> /* 1:获取dom 对象 2:获取绘图对象 3：进行操作 如画线 画圆 方形 等 */ //获取dom 对象 var canvas = document.getElementById(‘canvas‘); //获取绘图对象 var cxt = canvas.getContext(‘2d‘); //设置画笔的宽度 //如画一条线 moveTo(x,y)表示你要画的开始位置 // lineTo(x,y) 表示你要画到哪里，也就是拉到哪里 //stroke()表示执行 moveTo和lineTo命令 cxt.moveTo(20, 20); cxt.lineTo(100, 20); cxt.stroke(); //closePath 封闭路径 表示画的终点封闭 cxt.closePath(); //画一个空心圆形 凡是路径图形必须有开起路径，画完了要封闭新路径 //beginPath表示开启一个新路径 cxt.beginPath(); //arc(x,y,半径,角度范围1,角度范围2,顺或逆)是一个画圆 曲线等方法 cxt.arc(200, 200, 50, 0, 360, false); cxt.stroke(); cxt.closePath(); //画一个实心圆形 cxt.beginPath(); //设置填充的颜色 cxt.fillStyle = "rgb(255,0,0)"; cxt.arc(200, 100, 50, 0, 360, false) cxt.fill(); cxt.stroke(); cxt.closePath(); /*画一个矩形 矩形方法不属于路径图形所以不需 封闭路径以及开启路径,但是由于有时候需要 填充颜色或者其它方法,所以还是画一个图形 开启一个: cxt.beginPath(); cxt.closePath(); */ //rect(x,y,宽,高) cxt.beginPath(); cxt.rect(300, 20, 100, 100); cxt.stroke(); cxt.closePath(); //直接画 cxt.strokeRect(300, 150, 100, 100); //实心矩形 cxt.beginPath(); cxt.rect(300, 350, 100, 100); cxt.fill(); cxt.closePath(); //其他方法 这种方法最方便 cxt.fillRect(100, 400, 100, 100); //设置文字 cxt.font = "80px 黑体"; cxt.fillText("无兄弟，不编程", 20, 230); //空心字,没有填充功能 cxt.strokeText("无兄弟,不篮球", 20, 350); //画图 不同浏览器的支持不一样 var img = new Image(); img.src = "bl.gif"; //drawImage(要画的对象，x,y,宽,高) cxt.drawImage(img, 20, 37, 230, 306); //画三角形 cxt.beginPath(); cxt.moveTo(300, 500); cxt.lineTo(400, 350); cxt.lineTo(350, 450); cxt.closePath(); cxt.stroke(); //旋转图片 //设置旋转环境 save表示把当前设置好的环境保存好 cxt.save(); //图片设计旋转 //设置旋转角度 cxt.rotate(30*Math.PI/180); //旋转一个线段 cxt.beginPath(); cxt.moveTo(20, 20); cxt.lineTo(20, 100); cxt.stroke(); cxt.closePath(); //创建旋转空间 cxt.restore(); </script> </body> </html>
标签：style blog http color os java ar 2014 div
原文地址：http://www.cnblogs.com/yzenet/p/3946640.html
