这篇文章主要介绍如何使用HTML5画一个西瓜,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
代码如下:
<!DOCTYPE HTML> <html> <head> <script> window.onload = function() { canvas = document.getElementById("canvasArea"); context = canvas.getContext("2d"); drawArc ( 100, 25, 80, 0, 180, false, "#97C30A", "#FF717E"); function drawArc(xPos, yPos, radius, startAngle, endAngle, anticlockwise, lineColor, fillColor) { var startAngle = startAngle * (Math.PI/180); var endAngle = endAngle * (Math.PI/180); var radius = radius; context.strokeStyle = lineColor; context.fillStyle = fillColor; context.lineWidth = 8; context.beginPath(); context.arc(xPos, yPos, radius, startAngle, endAngle, anticlockwise); context.fill(); context.stroke(); } } </script> </head> <body> <div style = "width:240px; height:140px; margin:0 auto; padding:5px;"> <canvas id = "canvasArea" width = "210" height = "130" style = "border:2px solid black"> 你的浏览器目前不支持HTML5 Canvas。 </canvas> </div> </body> </html>
效果如下:
算吧算吧~是不是馋人的西瓜哈哈哈~
这里主要需要大家掌握的一个知识点就是HTML5 canvas元素;
HTML5 canvas元素用于绘制图形、动画、动态图像、图表、文本以增强用户体验。
canvas简介:HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
我们可以使用arc()方
法在画布上绘制弧线。
arc()
的语法
arc(x, y, radius, startAngle, endAngle, anticlockwise)
这里,x和y是圆心的坐标,radius是圆的半径,startAngle和endAngle参数是弧的起点和终点,以距 x 轴的弧度为单位。该逆时针参数是一个布尔值,当真实绘制圆弧逆时针,否则在顺时针方向。
以上是“如何使用HTML5画一个西瓜”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。