html5--5-2 绘制直线

最新推荐文章于 2021-05-31 02:37:39 发布

weixin_33701294

最新推荐文章于 2021-05-31 02:37:39 发布

阅读量254

点赞数

文章标签： javascript ViewUI

html5--5-2 绘制直线

学习要点

如何在HTML5文档中添加canvas元素
canvas的属性
了解canvas坐标系
了解script元素
绘制一条直线（准确的说是线段）

什么是canvas

HTML5的canvas元素是HTML5技术标准中最令人振奋的功能之一。它提供了一套强大的图形API，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。让开发者能够制作从文字处理到电子游戏的各类应用程序。由与canvas的操作需要用到JavaScript知识，而我们现在还没有讲到JavaScript，所以本章中我们只是学习canvas的基础操作。但是再后续课程中我们讲完JavaScript之后仍然会对canvas进行进一步的深入学习

绘制直线段流程:

在HTML5文档中添加canvas元素，并且设置的宽高和ID
在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
添加script元素
获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
1. 指定线宽:lineWidth= 数值
2. 指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
设定起点：moveTo(x坐标,y坐标)
设定终点：lineTo(x坐标,y坐标)
开始绘制：stroke()

实例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 
 8 <body>
 9 </body>
10 </html><!DOCTYPE html>
11 <html lang="en">
12 <head>
13     <meta charset="UTF-8">
14     <title>Document</title>
15     <style type="text/css">
16         canvas{background: #A9A9A0}
17     </style>
18 </head>
19 <body>
20     <canvas id="mycanvas" width="500px" height="300">
21         您的浏览器暂不支持HTML5的canvas元素！！
22     </canvas>
23     <script type="text/javascript">
24         //定义变量获取画布DOM
25         var canvas=document.getElementById("mycanvas");
26         //设置绘画环境为2d
27         var context=canvas.getContext("2d");
28         //用moveto设置起点
29         context.moveTo(10,10);
30         //用lineTo设置终点
31         context.lineTo(100,100);
32         //开始画线
33         context.stroke();
34     </script>
35 </body>
36 </html>