HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛。简单地说，canvas元素能够在网页中创建一块矩形区域，这块矩形区域可以成为画布，这其中可以绘制各种图形。可别小看了这个画布，它能实现无限的可能性。接下来我们从最简单的部分开始，逐步认识Canvas的强大功能。

1.在页面中添加canvas元素：

默认情况下，Canvas所创建的矩形区域大小为宽300像素，高150像素，不过我们可以使用width和height属性来自定义画布的宽度和高度。

像素概念：从定义上来看，像素是指基本原色素及其灰度的基本编码。像素是构成数码影像的基本单元，通常以像素每英寸PPI（pixels per inch）为单位来表示影像分辨率的大小。

例如：一张JPG图片 其PPI(pixel per inch) 像素 =300 知道图片尺寸可以算出共多少像素
ppi=300 就意味着每英寸有300个像素 长为5cm 1inch约=2.54cm  故5cm=（1/2.54）*5 inch 宽为3.8cm 3.8cm=3.8/2.54 inch 这张相片就是约590.55*448.82像素

Ex：构造一个宽200像素，高100像素的画布，并设置实心的边框：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>我是标题</title>

</head>

<body>

<canvas id="myCanvas" style="border:1px solid;"width="200" height="100"></canvas>

</body>

</html>

2.Canvas如何绘制图形：

　1.在HTML5页面中添加canvas元素，必须定义canvas元素的id属性以便我们以后的调用。

<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>//这里设置canvas 的id为myCanvas

　　 2.在JavaScript代码中使用document.getElementById方法来寻找我们的canvas。

var ctx=document.getElementById("myCanvas")//找到我们创建的canvas

　　 3.然后我们使用getContext方法来获取canvas 元素的上下文(context),目前在画布中支持2d作图，所以getContext的参数为2d，也许在以后会支持3d作图后，参数也许会有3d。

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

　　 4.使用JavaScript来进行绘图。在以后我们会接触到下面的基础绘图方法：

context.fillStyle="red"//设置填充颜色

context.fillRect(x1,y1,x2,y2)//其中x1,y1为矩形左上坐标，x2,y2为矩形右下坐标

context.strokeStyle="blue"//设置划线颜色

context.strokeRect(x1,y1,x2,y2)//同上所述

EX：构造宽200像素，高100像素的画布，在画布中创建一个填充颜色为#FF00FF的矩形

<!doctype html>

<html>

<body>

<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>

<script type="text/javascript">

    var c=document.getElementById("myCanvas");

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

    context.fillStyle="#FF00FF";

    context.fillRect(50,25,100,50);

</script>

</body>

</html>

HTML5 画布canvas元素的更多相关文章

  1. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  2. HTML5画布Canvas

    一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

  3. 关于HTML5画布canvas的功能

    一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid ...

  4. HTML5 画布canvas

    SVG的<defs> <symbols> 元素用于预定义一个元素使其能够在SVG图像中重复使用 <svg xmlns="http://www.w3.org/20 ...

  5. 10款面向HTML5 画布(Canvas)的JavaScript库

    https://www-evget-com/article/2014/4/9/20799.html

  6. HTML5之canvas元素

    定义和用法 fillStyle 属性设置或返回用于填充绘画的颜色.渐变或模式. 默认值: #000000 JavaScript 语法: context.fillStyle=color|gradient ...

  7. 面向画布(Canvas)的JavaScript库

    面向画布(Canvas)的JavaScript库 总结 每个库各有特色,根据需求选择   学习要点 面向画布(Canvas)的JavaScript库 EaselJS 是一个封装了 HTML5 画布(C ...

  8. 【HTML5】Canvas画布

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

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

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

随机推荐

  1. 实现多表关联来方便你的SELECT查询功能

    这次来学习一下多表关联.比如在数据中创建下面几张表,你可以从主键PRIMARY KEY与外键FOREIGN KEY来看到这几张表它们之间的关系. 场所表[dbo].[SixS_Location]: 主 ...

  2. .net又一个生成缩略图的方法，不变形

    生成缩略图是一个十分常用功能,找到了一个方法,重写部分代码,实用又好用,.net又一个生成缩略图的方法,不变形 /// <summary> /// 为图片生成缩略图 by 何问起 /// ...

  3. 如何在MVC_WebAPI项目中的APIController帮助页面添加Web测试工具测试

    本文转载自:http://www.cnblogs.com/pmars/p/3673811.html 先看效果图: 以下是原文: 如何在帮助页面添加测试工具 上一篇我在ASP.NET里面添加了一个Hel ...

  4. Wojilu学习笔记 (01)

    “我记录”开发框架(wojilu framework) 是 .net 平台下的综合开发框架,主要用于 web 方面的快速开发. 官方网址:http://www.wojilu.com源码托管网址: ht ...

  5. iOS阶段学习第28天笔记(UIView的介绍)

    iOS学习(UI)知识点整理 一.关于UIVIew 的介绍 1)概念:UIView 是用于装载并展示各类控件的大容器,是iOS中所有UI控件的基类 2)UIView  初始化实例代码 UIView * ...

  6. Win10 IoT C#开发 3 - GPIO Pin 控制发光二极管

    Windows 10 IoT Core 是微软针对物联网市场的一个重要产品,与以往的Windows版本不同,是为物联网设备专门设计的,硬件也不仅仅限于x86架构,同时可以在ARM架构上运行. 上一篇文 ...

  7. EventBus简单的实现

    EventBus是最近项目用到的,也只是会些简单的功能,不过感觉功能蛮强大的.代码链接:http://download.csdn.net/detail/qq_29774291/9629346 Even ...

  8. Scalaz（9）－ typeclass：checking instance abiding the laws

    在前几篇关于Functor和Applilcative typeclass的讨论中我们自定义了一个类型Configure,Configure类型的定义是这样的: case class Configure ...

  9. 我的JavaScript笔记

    JavaScript 一种基于对象(object)和事件驱动(Event Driven)的嵌入式脚本语言. 简单的例子 <html> <head> <title>D ...

  10. linux下安装redis的详细过程

    先安装一些组件: yum -y install gcc gcc-c++ libstdc++-devel 下载并安装: # wget http://download.redis.io/releases/ ...