<!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=
html画红心
最新推荐文章于 2024-06-18 09:53:59 发布
该博客展示了如何使用HTML5的canvas元素和JavaScript来绘制一个红色的心形图案。通过定义路径和贝塞尔曲线,作者创建了一个详细的填充和描边的心形图形。
摘要由CSDN通过智能技术生成