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. [水煮 ASP.NET Web API2 方法论]（3-6）万能路由

    问题 定义什么样的路由,可以不会受请求参数类型和数量的限制,而被全部捕获? 解决方案 在路由模板中,给参数添加一个"*"前缀,例如 {*param},只要请求的 URL 能够和路由 ...

  2. Javascript权威指南

    一.数字写法 3.14 2345.789 .333333333333333333 6.02e23 // 6.02 × 10 23 1.4738223E-32 // 1.4738223 × 10 −32 ...

  3. 在Win Server 2012中安装.NET Framework 3.5的问题

    在Windows Server 2012 上安装 SQL Server 2012 时,提示 启用 Windows 功能 NetFx3 时出错,错误代码:-2146498298.请尝试从 Windows ...

  4. Java---Java的面试题（一）

    1.什么是Java虚拟机?为什么Java被称作是"平台无关的编程语言"? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节 ...

  5. 一不小心把oschina给戒了

    不知怎么回事,逐渐变成一周看一次oschina了.

  6. c语言是如何实现泛型链表

    最近有看一点Linux内核源码,发现内核里大量使用了list_head结构体.百度查了一下,原来内核利用这个结构体实现了泛型. 自认为对链表已经很熟悉的我,决定自己实现一下. 下面以Node和list ...

  7. No.018：4Sum

    问题: Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = ...

  8. iOS 10 常见配置的问题

    UITextField 在iOS 10 中,UITextField新增了textContentType字段,是UITextContentType类型,它是一个枚举,作用是可以指定输入框的类型,以便系统 ...

  9. 利用PBFunc在Powerbuilder中支付宝当面付功能

    在PB实现支付宝当面付的功能,需要先在支付宝进行商户签约,并设置相关的公钥信息(具体参考支付宝文档). 然后使用对应的私钥文件对参数进RSAWithSha1前面计算.具体代码如下: string ls ...

  10. ANDROID 应用退出

    在android中finish()和system(0)都只能退出单个activity.杀进程等的等方式都不行~~~解决问题: 在针对 多activity中退出整个程序,例如从A->B->C ...