心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

canvas学习（html5）画画

发布时间：2022-07-04 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了canvas学习（html5）画画，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

canvas画画

    • 坐标是以canvas的为标准的
  • 画长方形 ：
  • 画圆形 ：
    • 画线条：
    • 写文字：
    • 写了一个王字（代码）：
    • 效果图

1.基本语法： htML canvas 标签： 是个盒子（有长，宽）和div相同，但可以在里面画画

<canvas id="canvas1" width="400px"  height="400px"></canvas>

 <script>

VAR canvas=document.getElementById("canvas1");

var ctx=canvas.getContext('2d');

    </script>

坐标是以canvas的为标准的

canvas学习（html5）画画

开始画：

画长方形 ：

ctx.fillStyle=“颜色”； 填充颜色 ctx.fillRect(矩形左上角x坐标 ,矩形左上角 y坐标, width, height, ); 连续的对应的

ctx.fillStyle="black";
ctx.fillRect(0,0,20,20);

画圆形 ：

ctx.arc(x,y,radius,sAngle,eAngel，true)； false/true :顺时针或者逆时针:画圆形 sAngle 默认为0方便画圆 x,y圆上的圆心坐标，radius为半径， sAngle:绘制开始的角度。 圆心到最右边点是0度，顺时针方向弧度增大。 eAngel:结束的角度，注意是弧度。 弧度和角度的转换公式： rad = deg*Math.PI/180;

ctx.stroke(); 实线绘圆的框架/或者线条 ctx.fill(); 填充颜色（上一个设置的ctx.fillStyle） 2*Math.PI：周长 完整圆形 Math.PI ：半圆形

ctx.arc(150,150,30,0,2*Math.PI,true);
ctx.stroke();

半圆形
ctx.fillStyle="pink";
ctx.arc(150,150,30,0,Math.PI,true);
ctx.stroke();
ctx.fill();

画线条：

ctx.moveTo(x坐标, y坐标); 线条的起点 ctx.lineto(x坐标, y坐标); 线条的终点

ctx.strokeStyle=“red” 线条颜色， ctx.beginPath(); //重新开始一条路径使颜色不互相影响

ctx.moveTo(10, 10);
ctx.lineTo(10,200);
ctx.stroke();

写文字：

clearRect(X,Y, width, height) clearRect() 方法清空给定矩形内的指定像素(清空矩形内内容) ctx.clearRect(0, 0,600,600); ctx.fillText(“文字”,x坐标, y坐标);

ctx.fillText("hello world!",100,200);

写了一个王字（代码）：

<style>

@H_126_414@canvas{
    border: 2px solid black;
}


</style>
<body>
    









    <canvas id="canvas1"  width="400px" height="400px"></canvas>


<script>
var canvas=document.getElementById("canvas1");

var ctx=canvas.getContext("2d");

console.dir(ctx);

ctx.moveTo(30,30);
ctx.lineTo(300,30);
ctx.stroke();

ctx.beginPath();

ctx.moveTo(30,170);
ctx.lineTo(300,170);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(30,300);
ctx.lineTo(300,300);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(150,30);
ctx.lineTo(150,300);
ctx.stroke();
</script>

效果图

canvas学习（html5）画画

脚本宝典总结

以上是脚本宝典为你收集整理的canvas学习（html5）画画全部内容，希望文章能够帮你解决canvas学习（html5）画画所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：capjavajavascriptphppythonString程序员程序员
猜你在找的心得技巧相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程