大佬教程收集整理的这篇文章主要介绍了Html5中Canvas绘图，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
| <!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> </head> <body> <canvas width="500" height="300" style="border: 1px solid blueviolet;"> 浏览器不支持Canvas </canvas> <script type="text/javascript"> var cas = document.querySELEctor("canvas"); //获取绘制环境 var ctx = cas.getContext("2d"); 填充颜色，如同更换画笔一般 ctx.fillStyle = '#ff0'; 绘制矩形 ctx.fillRect(100,100,150,100); console.log(cas); </script> </body> </html> |
| <!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> </head> <body> <canvas width="500" height="300" style="border: 1px solid blueviolet;"> 浏览器不支持Canvas </canvas> <script type="text/javascript"> //路径开始 路径规划 ctx.moveTo(100,100); 移动画笔，没有路径线 ctx.lineTo(200,95)">在画布上移动画笔，如同画画 ctx.lineTo(100,200); ctx.lineTo(150,0); ctx.lineTo(200,200); ctx.lineTo(100,100); 路径结束 ctx.closePath(); 填充路径 ctx.fillStyle = 'red'; ctx.fill(); </script> </body> </html> |
效果图：
| <!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> </head> <body> <canvas width="500" height="300" style="border: 1px solid blueviolet;"> 浏览器不支持Canvas </canvas> <script type="text/javascript"> //路径移动到圆心 ctx.moveTo(100,95)">画一个整圆 //ctx.arc(100,50,360); //根据传递的参数画图 ctx.arc(100,getHuDu(120)); 填充路径 ctx.fillStyle = 'red'; ctx.fill(); 获取弧度 function getHuDu(hd){ } </script> </body> </html> |
效果图：
| <!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> </head> <body> <canvas width="500" height="300" style="border: 1px solid blueviolet;"> 浏览器不支持Canvas </canvas> <script type="text/javascript"> //绘制文字 ctx.font = '20px 宋体'; ctx.align = 'center'; ctx.fillText('午_夜博客',200,150); </script> </body> </html> |
效果图：
| <!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> </head> <body> <canvas width="500" height="300" style="border: 1px solid blueviolet;"> 浏览器不支持Canvas </canvas> <script type="text/javascript"> var img = new Image(); img.src = 'img/te.png'; 绘制图片 ctx.drawImage(img,500,300); } </script> </body> </html> |
效果图：
以上是大佬教程为你收集整理的Html5中Canvas绘图全部内容，希望文章能够帮你解决Html5中Canvas绘图所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。