html5 canvas基本图形绘制
2014-03-10 21:46
483 查看
该部分简单展示canvas中基本图形的绘制。简单的理解,canvas可以理解为添加一个供js绘图的环境,在其contnetText上通过js代码进行各种绘制。
线段/矩形/圆形/文字/图片/图片旋转。
线段/矩形/圆形/文字/图片/图片旋转。
<!doctype html> <html> <head></head> <body> <canvas width="500" height="800" style="background:yellow" id="canvas"> 您的浏览器当前版本不支持canvas标签 </canvas> <script> //获取画布DOM 还不可以操作 var canvas=document.getElementById('canvas'); //alert(canvas); //设置绘图环境 var cxt=canvas.getContext('2d'); //alert(cxt); //画一条线段。 //开启新路径 cxt.beginPath(); //设定画笔的宽度 cxt.lineWidth=10; //设置画笔的颜色 cxt.strokeStyle="#ff9900"; //设定笔触的位置 cxt.moveTo(20,20); //设置移动的方式 cxt.lineTo(100,20); //画线 cxt.stroke(); //封闭路径 cxt.closePath(); //画一个空心圆形 凡是路径图形必须先开始路径,画完图之后必须结束路径 //开始新路径 cxt.beginPath(); //重新设置画笔 cxt.lineWidth=3; cxt.strokeStyle="green"; 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.rect(300,20,100,100); cxt.stroke(); cxt.closePath(); //其他方法 建议使用此方式 cxt.strokeRect(300,150,100,100) //实心矩形 cxt.beginPath(); cxt.rect(300,270,100,100); cxt.fill(); cxt.closePath(); //其他方法 建议使用此方式 cxt.fillRect(300,390,100,100); //设置文字 cxt.font="40px 宋体";//css font属性 cxt.fillText("无兄弟,不编程",20,300); //将笔触设置为1像素 cxt.lineWidth=1; cxt.strokeText("无兄弟,不编程",20,350); //画图 把一幅图片画到画布中 注意webkit内核的浏览器 chrome和猎豹不支持 var img =new Image(); img.src="xiaomm.jpg"; cxt.drawImage(img,20,370,230,306); //画一个三角形 cxt.beginPath(); //移动至开始点 cxt.moveTo(300,500); cxt.lineTo(300,600); cxt.lineTo(400,550); cxt.closePath();//填充或者画路径需要先闭合路径再画 cxt.stroke(); //实心三角形 cxt.beginPath(); //移动至开始点 cxt.moveTo(300,600); cxt.lineTo(300,700); cxt.lineTo(400,650); cxt.closePath(); cxt.fill(); //旋转图片 图片 //设置旋转环境 cxt.save(); //在异次元空间重置0,0点的位置 cxt.translate(20,20); //图片/形状旋转 //设置旋转角度 参数是弧度 角度 0-360 弧度=角度*Math.PI/180 cxt.rotate(-30*Math.PI/180); //旋转一个线段 cxt.lineWidth=10; cxt.beginPath(); cxt.moveTo(0,0); cxt.lineTo(20,100); cxt.stroke(); cxt.closePath(); //将旋转之后的元素放回原画布 cxt.restore(); //过程不可颠倒 先设置00点在旋转角度,然后画图 //旋转小萌萌 cxt.save(); cxt.translate(20,370); cxt.rotate(-10*Math.PI/180); var img =new Image(); img.src="xiaomm.jpg"; cxt.drawImage(img,0,0,230,306); cxt.restore(); </script> </body> </html>
相关文章推荐
- HTML5 Canvas(1) 绘制基本图形和线条
- [置顶] HTML5 绘制图形 Canvas 与 SVG 的基本用法
- HTML5 Canvas(1) 绘制基本图形和线条
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
- HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)
- html5 canvas 笔记一(基本用法与绘制图形)
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
- HTML5 Canvas绘制多个图形时,点击图形实现页面跳转
- HTML5移动开发(6)——Canvas图形绘制基础
- html5绘制基本图形-直线
- HTML5 canvas基本绘图之图形组合
- Canvas基础1-绘制基本图形和线条
- 学习笔记:HTML5 Canvas绘制简单图形
- [Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
- JavaScript实现使用Canvas绘制图形的基本教程
- 在Canvas中利用Path绘制基本图形
- 小强的HTML5移动开发之路(6)——Canvas图形绘制基础
- html5 canvas实例 绘制变形图形 径向渐变
- HTML5学习笔记14-Canvas绘制渐变图形与绘制变形图形