html5--5-2 绘制直线

html5--5-2 绘制直线

 

学习要点

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

什么是canvas

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

绘制直线段流程:

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

 

实例

 html5--5-2 绘制直线_第1张图片

html5--5-2 绘制直线_第2张图片

 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>Documenttitle>
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>

 

你可能感兴趣的:(html5--5-2 绘制直线)