html5--5-1 了解canvas元素

学习要点

  • 如何在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 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>

 </body>

 </html>

html5--5-1 了解canvas元素的更多相关文章

  1. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  2. html5 canvas元素使用(一)

    html5新增了一个canvas元素,用于在网页上生成一块矩形区域,用于绘制图像,功能非常强大,下面我来简单介绍一下 在页面中添加canvas <canvas id="canvasDe ...

  3. HTML5 的绘图支持- canvas

    Canvas HTML5新增了一个canvas元素,它是一张空画布,开发者需要通过JavaScript脚本进行绘制. 在canvas上绘图,经过如下3步 (1) 获取canvas元素对应的DOM对象. ...

  4. HTML5图形绘制学习（1）-- Canvas 元素简介

    Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素.和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形. 这里所说的绘制图型,不是指我们可以进行可视化的图形绘制, ...

  5. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

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

  6. Html5 canvas 元素

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  7. 【高级功能】使用canvas元素（第一部分）

    1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...

  8. 使用canvas元素-art方法绘制圆弧

    最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...

  9. html5学习笔记：canvas

    1.什么是canvas? 可以绘制图形的标签.一般用javascript来绘制. 2.创建一个画布 <!DOCTYPE html> <html> <head> &l ...

  10. 【温故而知新-Javascript】使用canvas元素（第二部分）

    本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...

随机推荐

  1. GRPC协议的相关原理

    GRPC的Client与Server,均通过Netty Channel作为数据通信,序列化.反序列化则使用Protobuf,每个请求都将被封装成HTTP2的Stream,在整个生命周期中,客户端Cha ...

  2. Xcode: This device is no longer connected error

    Quit the xcode and connect again will all right.

  3. Direct2D教程（三）简单几何图形

    从本章开始,我们介绍D2D几何图形. D2D图形分类 Direct2D支持多种类型的几何图形,包括Simple Geometry(简单几何图形) 矩形 圆角矩形 椭圆 Path Geometry(路径 ...

  4. 第四讲_图像识别之图像分类Image Classification

    第四讲_图像识别之图像分类Image Classification 目录 图片分类 性能指标:top1,top5 ILSVRC:每种任务数据集不一样 imageNet:根据WorldNet组织的图片集 ...

  5. 2013-06-09 12:03 如何在SQLServer中锁定某行记录

    锁的概述  一. 为什么要引入锁  多个用户同时对数据库的并发操作时会带来以下数据不一致的问题:  丢失更新  A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了另一个修改的结果,比如订 ...

  6. xammp 配置虚拟主机

    ## This is the main Apache HTTP server configuration file. It contains the# configuration directives ...

  7. wdcp新开站点或绑定域名打不开或无法访问的问题

    一 用IP可以打开,但用域名打开网站显示到默认页面1  站点列表里是否有相应的网站信息 2  检查有没站点配置文件后台 >系统管理 >文件管理器 >虚拟主机站点文件(nginx,ap ...

  8. 【java读书笔记】——java的异常处理

    程序在实际环境的执行过程中.安全成为须要首先考虑的重要因素之中的一个.这也是用户和程序猿最关心的问题.同一时候,Java语言健壮性也体如今了可以及时有效地处理程序中的错误.准确的说是Java的异常处理 ...

  9. Qt5的插件机制（6）--开发Qt插件时几个重要的宏

    怎样开发Qt插件,能够在Qt Assistant 中搜索"Qt Plugins"或"How to Create Qt Plugins",看看那篇manual中的 ...

  10. 笔记03 MVVM 开发的几种模式（WPF）

    转自http://www.cnblogs.com/buptzym/p/3220910.html 在WPF系(包括SL,WP或者Win8)应用开发中,MVVM是个老生常谈的问题.初学者可能不会有感觉,但 ...