Professional JavaScript for Web Developers    P552

Basic Usage

  The <canvas> element requires at least its width and height attributes to be set in order to indicate the size of the drawing to be created. Any content appearing  between the opening and closing tags is fallback data that is displayed only if the <canvas> element isn't supported.

  To begin with drawing on a canvas, you need to retrieve a drawing context. A reference to a drawing context is retrieved using the getContext() method and passing in the name of the context. For example, passing "2d" retrieves a 2D context object:

 var drawing = document.getElementById("drawing");

 // make sure <canvas> is complet supported
if (drawing.getContext) {
var context = drawing.getContext("2d");
}

  The coordinates in a 2D context begin at the upper-left of the <canvas> element, which is considered point(0, 0). All coordinate values are calculated in relation to that point. By default, the width and height indicate how many pixels are available in each direction.

Fills and Strokes

  Fill automatically fills in the shape with a specific style (color, gradient, or image) while stroke colors only the edges. Most of the 2D context operations have both fill and stroke variant, and how they are displayed is based on a couple of properties: fillStyle and strokeStyle.

  Both properties can be set to a string, a gradient object, or a pattern object. A string value indicates a color defined using one of the various CSS color formats: name, hex code, rgb, rgba, hsl, or hsla.

Drawing Rectangles

  There are three methods for working with rectangles: fillRect(), strokeRect(), and clearRect(). Each of these methods accepts four arguments: the x-coordinate of the rectangle, the y-coordinate of the rectangle, the width of the rectangle, and the height of the rectangle. Each of these arguments is considered to be in pixels.

  The fillRect() method is used to draw a rectangle that is filled with a specific color onto the canvas. The fill color is specified using the fillStyle property, for example:

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var drawing = document.getElementById("drawing"); // make sure <canvas> is complet supported
if (drawing.getContext) {
var context = drawing.getContext("2d"); // draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50); // draw a blue rectangle that's semi-transparent
context.fillStyle = "rgba(0, 0, 255, 0.5)";
context.fillRect(30, 30, 50, 50);
}
}
</script>
</head>
<body>
<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>
</body>
</html>

  You can earse an area of the canvas by using the clearRect() method. This method is used to make an area of the drawing context transparent. Here is an example:

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var drawing = document.getElementById("drawing"); // make sure <canvas> is complet supported
if (drawing.getContext) {
var context = drawing.getContext("2d"); // draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50); // draw a blue rectangle that's semi-transparent
context.fillStyle = "rgba(0, 0, 255, 0.5)";
context.fillRect(30, 30, 50, 50); // clear a rectangle that overlaps both of the previous rectangles
context.clearRect(40, 40, 10, 10);
}
}
</script>
</head>
<body>
<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>
</body>
</html>

Drawing Paths

  Paths allow you to create complex shapes and lines. To start creating a path, you must first call beginPath() to indicate that a new path has begun. After that, the following methods can be called to create the path:

  • arc(x, y, radius, startAngle, endAngle, counterclockwise)
  • arcTo(x1, y1, x2, y2, radius)
  • lineTo(x, y)
  • moveTo(x, y)
  • rect(x, y, width, height)

利用HTML <canvas>做的弹球,[点击这里],具体细节还需要更改~

HTML <canvas> 学习笔记的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

  10. ucos实时操作系统学习笔记——任务间通信(消息)

    ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...

随机推荐

  1. The Tower HDU - 6559 (解析几何)

    The Tower HDU - 6559 The Tower shows a tall tower perched on the top of a rocky mountain. Lightning ...

  2. 远程文件传输工具sftp、scp、rsync

    一.scp 格式 scp [options] [user@]host : /sourcefile /destpathscp [options] /sourcefile [user@]host:/des ...

  3. pycharm中如何让两个项目并存

    之前总是打开一个,另外一个没有了,来回切换还要找最近的project.十分麻烦. 1.File下拉项中选择Settings 2.Settings设置界面打开Project下拉列表,选择“Project ...

  4. jpa介绍

    1.jpa的介绍 JPA是Java Persistence API的简称, 中文名为Java持久层API; 是JDK 5.0注解或XML描述对象-关系表的映射关系, 并将运行期的实体对象持久化到数据库 ...

  5. [Python]Python3调用java代码

    环境:Ubuntu16.04 桌面版 Ubuntu安装java的详细教程:https://www.cnblogs.com/ttkl/p/11933884.html 安装JPype1 pip3 inst ...

  6. [HEOI2016&TJOI2016] 排序(线段树)

    4552: [Tjoi2016&Heoi2016]排序 Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 2703  Solved: 1386[S ...

  7. [sdoi 2010][bzoj 1925]地精部落(神仙dp)

    Description 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为 N 的山脉 H可分 为从左到右的 N 段,每段有一个独一无二的高度 Hi, ...

  8. sh_15_字符串统计操作

    sh_15_字符串统计操作 hello_str = "hello hello" # 1. 统计字符串长度 print(len(hello_str)) # 2. 统计某一个小(子)字 ...

  9. Windows上redis下载与安装

    一.redis是什么 非关系型内存数据库,以key-value的形式将数据储存在内存中.Mysql是关系型数据库,数据是保存在硬盘中 二.redis下载安装 1.要安装Redis,首先要获取安装包. ...

  10. 十一、spring插件

    1.STS插件_ springsource-tool-suite插件各个历史版本 2.eclipse安装spring的插件 3.奇技淫巧:在spring官网上下载历史版本的spring插件,sprin ...