HTML5与CSS画一个馋人的西瓜
前言
炎炎夏日,怎么能少了冰凉的西瓜呢?在我们掌握某程序功能时,总是想要实现奇奇怪怪的效果,哈哈,那么今天正如标题所言,咱们就用HTML5来实现一个半圆弧西瓜(不带籽嘻嘻)。
正文
不知道各位对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
style = "border:2px solid black">
你的浏览器目前不支持HTML5 Canvas。
</canvas>
</div>
</body>
</html>
效果如下:
算吧算吧~是不是馋人的西瓜哈哈哈~
这里主要需要大家掌握的一个知识点就是HTML5 canvas元素;
HTML5 canvas元素用于绘制图形、动画、动态图像、图表、文本以增强用户体验。
我们可以使用arc()方
法在画布上绘制弧线。
arc()
的语法
arc(x, y, radius, startAngle, endAngle, anticlockwise)
这里,x和y是圆心的坐标,radius是圆的半径,startAngle和endAngle参数是弧的起点和终点,以距 x 轴的弧度为单位。该逆时针参数是一个布尔值,当真实绘制圆弧逆时针,否则在顺时针方向。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfbhbg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01