HTML5绘制图像_html5自画像-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_50777680/article/details/120621381

这篇博客通过四个示例介绍了HTML5 Canvas的基本绘图技术，包括如何绘制直线、创建线性渐变、填充矩形以及画圆和圆弧。示例代码详细展示了使用JavaScript操作Canvas API进行图形绘制的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制直线</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3"></canvas>
<script>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle="red";
cxt.moveTo(20,80);
cxt.lineTo(260,80);
cxt.stroke();
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制渐变线条</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3"></canvas>
<script>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//创建一个渐变对象
var gradient=cxt.createLinearGradient(0,0,170,0);
gradient.addColorStop(0,"blue");
gradient.addColorStop(0.5,"green");
gradient.addColorStop(1,"red");
cxt.strokeStyle="gradient";
cxt.lineWidth=5;
cxt.moveTo(20,80);
cxt.lineTo(260,80);
cxt.stroke();
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制矩形</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3"></canvas>
<script>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="green";
//fillRect()方法里有4个参数，分别代表矩形左上角x坐标，y坐标。矩形的宽度，高度，
cxt.fillRect(30,30,100,50);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制圆和圆弧</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3"></canvas>
<script>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//绘制一个圆
cxt.beginPath();
cxt.arc(70,70,50,0,2*Math.PI);
cxt.stroke();
cxt.closePath();
//绘制1/4个圆
cxt.beginPath();
cxt.arc(200,70,50,0,0.5*Math.PI);
cxt.stroke();
cxt.closePath();
</script>
</body>
</html>