Canvas绘制矩形

    绘制矩形  context.fillRect(x,y,width,height)  strokeRect(x,y,width,height)

   x:矩形起点横坐标(坐标原点为canvas的左上角,当然确切的来说是原始原点,后面写到变形的时候你就懂了,现在暂时不用关系)

     y:矩形起点纵坐标

     width:矩形长度

     height:矩形高度

  • 创建HTML页面,设置画布标签

  • 编写js,获取画布dom对象

  • 通过canvas标签的Dom对象获取上下文

  • 设置绘制样式、颜色

  • 绘制矩形,或者填充矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<canvas id="demoCanvas" width="500" height="500">
    <p>请使用支持HTML5的浏览器查看本实例</p>
</canvas>
<!---下面将演示一种绘制矩形的demo--->
<script type="text/javascript">
    //第一步:获取canvas元素
 var canvasDom = document.getElementById("demoCanvas");
    //第二步:获取上下文
 var context = canvasDom.getContext('2d');
    //第三步:指定绘制线样式、颜色
 context.strokeStyle = "red";
    //第四步:绘制矩形,只有线。内容是空的
 context.strokeRect(10, 10, 190, 100);
    //以下演示填充矩形。
 context.fillStyle = "blue";
    context.fillRect(110,110,100,100);
</script>
</body>

</html>


Weiter lernen
||
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="500">
<p>使HTML5</p>
</canvas>
<!---demo--->
<script type="text/javascript">
//canvas
var canvasDom = document.getElementById("demoCanvas");
//
var context = canvasDom.getContext('2d');
//线
context.strokeStyle = "red";
//线
context.strokeRect(10, 10, 190, 100);
//
context.fillStyle = "blue";
context.fillRect(110,110,100,100);
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
einreichenCode zurücksetzen
图片放大关闭