Home > Article > Web Front-end > canvas绘画常用方法_html/css_WEB-ITnose
canvas绘画常用方法_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:29:181390browse
先说一下canvas元素比较游泳的方法主要是canvas通过getContext()方法获取的上下文对象。
其次设置颜色方面，通常有四种方法：16进制颜色值、英语单词、rgb、rgba。主要注意的是后两者，rgb的三个参数是红绿蓝0-255的值，rgba在此基础上添加了第四个参数透明度，范围0-1。
1.画矩形
<!DOCTYPE html><html><head lang="en"> <meta charset="utf-8"> <title></title> <script> //画矩形 function drawRect(id){ var canvas = document.getElementById(id); //获取上下文对象，canvas很多常用方法都是基于这个对象实现的 var context = canvas.getContext('2d'); //目前参数只有2d context.fillStyle = "gray"; //填充颜色 context.strokeStyle = "#f60"; //边框颜色 context.lineWidth = 5; //边框宽度 context.fillRect(0,0,400,300); //参数：x,y,width,height。绘制“已填色”的矩形,默认填充颜色是黑色 context.strokeRect(80,80,180,120); //参数：x,y,width,height。绘制未填色的矩形,默认填充颜色是黑色 context.strokeRect(110,110,180,120); } </script><head><body onload="drawRect('canvas');"><canvas id="canvas" width="400px" height="400px" ></canvas></body></html> JavaScript已经是所有浏览器的默认脚本语言，因此<script>标签中无需再指定脚本类型。</script>
2.画圆
<!DOCTYPE html><html><head lang="en"> <meta charset="utf-8"> <title></title> <script> //画圆形 function drawArc(id){ var canvas = document.getElementById(id); //获取上下文对象，canvas很多常用方法都是基于这个对象实现的 var context = canvas.getContext('2d'); //目前参数只有2d context.fillStyle = "#f1f2f3"; //填充颜色 context.fillRect(0,0,400,400); //参数：x,y,width,height。绘制“已填色”的矩形,默认填充颜色是黑色 for(var i=1; i<10; i++){ context.beginPath(); //路径开始 i % 2 ? context.arc(200,200,10*i,0,Math.PI,true): context.arc(200,200,10*i,0,Math.PI,false); //参数：x,y,半径,开始角度,结束角度,是否按顺时针方向 context.closePath(); //路径关闭 context.fillStyle = "rgba(255,0,0,0.25)"; //填充颜色 context.fill(); //绘制 } } </script><head><body onload="drawArc('canvas');"><canvas id="canvas" width="400px" height="400px" ></canvas></body></html> 3.写字
<!DOCTYPE html><html><head lang="en"> <meta charset="utf-8"> <title></title> <script> //写字 function drawText(id){ var canvas = document.getElementById(id); //获取上下文对象，canvas很多常用方法都是基于这个对象实现的 var context = canvas.getContext('2d'); //目前参数只有2d context.fillStyle = "gray"; //填充颜色 context.fillRect(0,0,800,300); //参数：x,y,width,height。绘制“已填色”的矩形,默认填充颜色是黑色 context.fillStyle = '#fff'; //填充颜色 context.strokeStyle = '#fff'; //边框颜色 context.font = "bold 40px '微软雅黑'"; //设置字体 //context.textBaseline = 'Top'; context.textAlign = 'start'; 文字相对于浏览器顶部和左侧的对齐方式 context.fillText('Canvas',50,50); context.strokeText('Canvas',70,100); } </script><head><body onload="drawText('canvas');"><canvas id="canvas" width="400px" height="400px" ></canvas></body></html> textBaseline和textAlign特点可以查看其他资源，就不在这混乱主题了。
4.将画保存
window.location = canvas.toDataURL('image/jpeg'); //保存图像 可以选择自己想要的格式。
5.动画
var i=100; function painting(){ //alert(1); context.fillStyle = "gray"; //填充颜色 context.fillRect(i,0,10,10); //参数：x,y,width,height。绘制“已填色”的矩形,默认填充颜色是黑色 i=i+20; } function draw(id){ var canvas = document.getElementById(id); //获取上下文对象，canvas很多常用方法都是基于这个对象实现的 var context = canvas.getContext('2d'); //目前参数只有2d setInterval(painting,100); //事件单位是毫秒 i=0; } 这个没有做出效果。看到别人用上面的方法，但是我这样写没有出来动画，调试果然显示painting函数内的context为定义。以后有时间再学习一下。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Git@OSC 推荐｜移动端css切片图合成雪碧图工具_html/css_WEB-ITnoseNext article：css清除浮动代码实例演示_html/css_WEB-ITnose