不 知道 各位对HTML5掌握了多少，或许大家可以在本地自己写一个能实现半圆弧西瓜样式的代码，小小提醒一下：西瓜典型的配色就是红配绿~
下面是我给出的一个实现方法，大家可以直接复制代码在本地测试：
代码如下：
<!DOCTY PE 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( xp os, yPos, radius, startAngle, endAngle,
anti clock wise, lineColor, fillColor)
{
VAR startAngle = startAngle * (Math.PI/180);
var endAngle = endAngle * (Math.PI/180);
var radius = radius;
context. stroke Style = lineColor;
context.fillStyle = fillColor;
context.lineWidth = 8;
context.be gin Path();
context.arc(xPos, yPos, radius, startAngle, endAngle, anticlockwise);
context.fill();
context.stroke();
}
}
</script>
</head>
<body>
<div style = "width:240px; h ei ght:140px; m arg in: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 轴的弧度为单位。该逆时针参数是一个布尔值，当真实绘制圆弧逆时针，否则在顺时针 方向 。
相关推荐：《HTML视频教程》《javascript基础教程》
以上就是教你用HTML5画一个馋人的西瓜的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 教你用HTML5画一个馋人的西瓜 全部内容，希望文章能够帮你解决 教你用HTML5画一个馋人的西瓜 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于教你用HTML5画一个馋人的西瓜的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did204467