HTML5系列代码：绘制⼀个圆形和矩形叠加的图形⼀个画布在⽹页中是⼀个矩形框，通过 元素来绘制。
注意: 默认情况下 元素没有边框和内容。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>绘制⼀个圆形和矩形叠加的图形</title>
<style type="text/css">
canvas {
border:1px solid #000;
}
</style>
<script type="text/javascript">
function Draw(){
var ElementById("canvas");
var context = Context("2d");
// 创建绘图路径
context.beginPath();//创建⼀个新的路径
context.arc(150,100,50,0,Math.PI*2,true);// 圆形路径
<(50,50,100,100);// 矩形路径
context.closePath();
// 设置样式
context.strokeStyle="#000";// 设置边框颜⾊
context.lineWidth=3;// 设置边框宽度
context.fillStyle="#f90";// 设置填充颜⾊
// 填充矩形形状
context.stroke();// 绘制边框
context.fill();// 填充区域
}
window.addEventListener("load",Draw,true);
</script>
</head>
<body >
<canvas id="canvas" width="400" height="300">你的浏览器不⽀持该功能！</canvas>
html制作一个网页</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。