html5中怎样绘制图形以及清空图像
在HTML5中新增了很多新的元素,可以帮忙我们实现很多新的功效。比方:图形的绘制,多媒体内容,api拖放元素,定位,利用程序缓存,储备等等。今天将要分享的是HTML5中与canvas元素相关的属性,canvas元素是用于定义图形,比方图表和其他图像等。是基于 JavaScript 的画图 API。接下来将在文章中为大家具体介绍怎样通过canvas元素绘制图像乃至清除图像
【引荐课程:HTML5教程】
图像绘制:
canvas元素用于绘制图像,但是它本身不具备绘制功效必需要通过足原本实现画图任务
例:通过canvas和JavaScript足本绘制一个圆
圆心坐标是:200,200;半径是:80;开端角度是:0;完毕角度是:2*Math.PI
<canvas id="myCanvas" width="500" height="500""> 您的阅读器不支撑 HTML5 canvas 标签。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(120,150,80,0,2*Math.PI); ctx.stroke(); ctx.fillStyle="pink"; ctx.fill(); </script>
结果图:
上述案例中我们可以通过arc()办法来实现圆的绘制,它的语法为:
arc(x,y,r,sAngle,eAngle,counterclockwise)
x,y:表示圆的中心坐标
r:代表圆的半径
sAngle :代表圆的起始角,以弧度计。
eAngle:代表圆的完毕角,以弧度计。
counterclockwise:为可选参数,表示是逆时针还是顺时针画图,其中true=逆时针,false=顺时针
清空画布:
绘制图形完毕后,我们可以通过两个办法来清空画布。它们离别为fillRect()办法乃至clearRect()办法
fillRect()办法直接把内容覆盖掉
ctx.fillStyle="red"; ctx.fillRect(80,120,70,50);
结果图:
clearReact()办法清除掉内容:
ctx.clearRect(80,120,70,50);
结果图:
本文参照 文章:https://www.html.cn/doc/html5/canvas/
总结:以上就是本篇文章的全部内容了,但愿通过这篇文章可以帮忙大家学会通过canvas元素绘制图形乃至清空画布的办法
以上就是html5中怎样绘制图形乃至清空图像的具体内容,更多请关注百分百源码网其它相关文章!