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()

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <body>

 </body>

 </html><!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         canvas{background: #A9A9A0}

     </style>

 </head>

 <body>

     <canvas id="mycanvas" width="500px" height="300">

         您的浏览器暂不支持HTML5的canvas元素！！

     </canvas>

     <script type="text/javascript">

         //定义变量获取画布DOM

         var canvas=document.getElementById("mycanvas");

         //设置绘画环境为2d

         var context=canvas.getContext("2d");

         //用moveto设置起点

         context.moveTo(10,10);

         //用lineTo设置终点

         context.lineTo(100,100);

         //开始画线

         context.stroke();

     </script>

 </body>

 </html>

html5--5-2 绘制直线的更多相关文章

  1. canvas绘制直线

    HTML5 <canvas>元素用于图形的绘制,该元素只是图形容器,必须使用javascript脚本绘制图形创建一个画布:<canvas id="myCanvas" ...

  2. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  3. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Cocos2d-x 重写draw方法绘制直线等图形时被遮挡覆盖问题的一种解决方案

    最近在学习过程cocos2dx的过程中需要使用到绘制直线的功能,所以我就采用了引擎中 ccDrawLine 方法,然后重写 draw 方法,在该方法中绘制直线. 但是出现了一个问题,那就是绘制的图形被 ...

  5. HTML5 WebAudioAPI(四)--绘制频谱图2

    绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { ale ...

  6. c# 动态绘制直线和曲线

    c# 动态绘制直线和曲线   在本案例中利用Graphics对象动态地绘制直线和曲线.程序运行后,选择“直线”单选按钮,然后按下鼠标左键拖动鼠标就可以绘制直线,选择“曲线”单选按钮,然后移动鼠标就可以 ...

  7. DDA_为微分绘制直线算法

    DDA_为微分绘制直线算法 以步进坐标轴部长=1像素为单位,计算y=kx + b,绘制像素点(x, round(y)). 即步进坐标增长1, 另一坐标增长K或者1/k. 程序如下: //数值微分算法D ...

  8. Breaseman算法绘制直线算法公式推导|步骤|程序

    Breaseman算法绘制直线算法公式推导|步骤|程序 BreaseMan算法优点: (1)不必计算直线的斜率,因此不用做除法: (2)不用浮点数,只用整数: (3)制作整数的加减乘除,和乘2操作,乘 ...

  9. 第一课、OpenGL绘制直线等等

    第一课.OpenGL绘制直线等等 分类: [开发技术]OpenGL 2012-01-18 14:59 5217人阅读 评论(0) 收藏 举报 buffer图形c // //  main.c //  o ...

随机推荐

  1. JavaScript世界万物诞生记

    作者:manxisuo链接:https://zhuanlan.zhihu.com/p/22989691来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 一. 无中生有 起 ...

  2. Jquery实现的图标抖动效果

    原文:http://www.webdm.cn/webcode/75de64a9-3fb4-473d-bc2c-97a0a063be79.html <!DOCTYPE html PUBLIC &q ...

  3. Android:MVC模式(下)

    在上一篇文章中,我们将 View 类单独出来并完成了设计和编写.这次我们将完成 Model 类,并通过 Controller 将两者连接起来,完成这个计算器程序. 模型(Model)就是程序中封装了数 ...

  4. maven运行update命令时报org/apache/maven/shared/filtering/MavenFilteringException错误

           在eclipse中对准项目运行maven->update project命令时报错:org/apache/maven/shared/filtering/MavenFiltering ...

  5. Naive Bayesian文本分类器

    贝叶斯学习方法中有用性非常高的一种为朴素贝叶斯学习期,常被称为朴素贝叶斯分类器. 在某些领域中与神经网络和决策树学习相当.尽管朴素贝叶斯分类器忽略单词间的依赖关系.即如果全部单词是条件独立的,但朴素贝 ...

  6. BIEE11G系统数据源账号过期问题（默认安装步骤）

    BIEE默认完毕安装后处于安全的考虑会对BI系统账户设定180天的有效期设置.例如以下图所看到的: 当账户超过时间后会自己主动口令失效.而造成BI系统启动失败.无法正常訪问等相关问题,到时候又一次设置 ...

  7. Scala 基础新手教程

    1.前言 近期在參加Hadoop和Spark培训.须要使用Scala,自学了一下作为入门.这里作一个记录. 2.下载 1) 在scala官网下载.地址: http://www.scala-lang.o ...

  8. 小谈Vim打开文件开头的&lt;feff&gt;

    在本地Windows机上开发的PHP程序上传到linuxserver上后,通过浏览器訪问对应接口.发现返回的数据前多了一个莫名的字符'-',甚为不解.之后通过网络抓包的方式,查看到接口返回数据前多了 ...

  9. mysql freeing items 状态

    http://blog.sina.com.cn/s/blog_6128a8f00100wsdd.html数据库出现大量的freeing items状态 表更新慢 而且大量锁表查看mysql官方free ...

  10. 【每日Scrum】第四天（4.25） TD学生助手Sprint2站立会议

    站立会议 组员 昨天 今天 困难 签到 刘铸辉 (组长) 和小楠重写架构,使代码更加简洁,并增加了几个界面 今天增加了几个页面的子菜单,然后设计了几个要用的界面 遇到的困难是,菜单的事件处理真是神一样 ...