canvas元素只是图形的容器，必需使用js脚本来绘制图形，实际上canvas并不能绘图，就相当于一张画布，通过js，获取canvas元素，调用canvas元素的方法，设置平面图形、文字、添加阴影、添加渐变等；结合循环结构，可以绘制高级图形。
绘制矩形
通过canvas元素的属性，设置矩形颜色及大小、整个矩形的水平及垂直位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画图功能</title>
<link href="text.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>画图入门</h2>
<canvas id="e" width="300px" height="100px" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('e');
<!--获取canvas对应的dom对象-->
var ctx=canvas.getContext('2d');
<!--获取canvas上绘图的canvasRenderingContext2D对象-->
ctx.fillStyle='#f00';<!--填充颜色-->
ctx.fillRect(30,1,100,100);<!--绘制矩形-->
</script>
</body>
</html>
绘制矩形边框
通过canvas元素的属性，设置矩形边框颜色、宽度、四个角的形状
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画图功能</title>
<link href="text.css" 
最低0.47元/天 解锁文章
扫一扫
8062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
