html画红心

最新推荐文章于 2024-06-21 09:56:49 发布

傲世阿龍

最新推荐文章于 2024-06-21 09:56:49 发布

阅读量2.3k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/u010383937/article/details/72762947

版权

该博客展示了如何使用HTML5的canvas元素和JavaScript来绘制一个红色的心形图案。通过定义路径和贝塞尔曲线，作者创建了一个详细的填充和描边的心形图形。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>canvas元素示例</title>
<script>
function draw(id)
{
	var canvas = document.getElementById(id);
	var context = canvas.getContext('2d');
	context.fillStyle = "#EEEEFF";
	context.fillRect(0,0,150,150);
	context.beginPath();
	context.fillStyle = '#c00';
	context.strokeStyle = '#c00';
	context.moveTo(75,40);
	context.bezierCurveTo(74,37,70,25,50,25);
	context.bezierCurveTo(20,25,20,62.5,20,62.5);
	context.bezierCurveTo(20,80,40,102,75,120);
	context.bezierCurveTo(110,102,130,80,130,62.5);
	context.bezierCurveTo(130,62.5,130,25,100,25);
	context.bezierCurveTo(85,25,75,37,75,40);
	context.fill();
	context.stroke();
}
context.closePath();
</script>
</head>
<body οnlοad="draw('canvas');">
<h1>红心</h1>
<canvas id=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

傲世阿龍

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html画红心

canvas元素示例function draw(id){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); context.fillStyle = "#EEEEFF"; context.fillRect(0,0,150,150); context.begi
复制链接

扫一扫