zoukankan      html  css  js  c++  java
  • 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()

    实例

     

     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>
  • 相关阅读:
    light oj 1105 规律
    light oj 1071 dp(吃金币升级版)
    light oj 1084 线性dp
    light oj 1079 01背包
    light oj 1068 数位dp
    light oj 1219 树上贪心
    light oj 1057 状压dp TSP
    light oj 1037 状压dp
    矩阵快速幂3 k*n铺方格
    矩阵快速幂2 3*n铺方格
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/7979634.html
Copyright © 2011-2022 走看看