HTML5 新特性(2)--Canvas
什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas");
然后,创建 context 对象:
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
illStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
<head>
<style type="text/css">
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</style><script type="text/javascript">
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head><body style="margin:0px;"><p>把鼠标悬停在下面的矩形上可以看到坐标:</p><div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" οnmοusemοve="cnvs_getCoordinates(event)" οnmοuseοut="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div></body>
把鼠标悬停在下面的矩形上可以看到坐标:
实例 - 线条
通过指定从何处开始,在何处结束,来绘制一条线:
JavaScript 代码:
<script type="text/javascript">var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();</script>
canvas 元素:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
实例 - 圆形
通过规定尺寸、颜色和位置,来绘制一个圆:
JavaScript 代码:
<script type="text/javascript">var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();</script>
canvas 元素:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
实例 - 渐变
使用您指定的颜色来绘制渐变背景:
JavaScript 代码:
<script type="text/javascript">var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);</script>
canvas 元素:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
实例 - 图像
把一幅图像放置到画布上:
<script type="text/javascript">var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);</script>
cancas元素:
canvas 元素:canvas 元素:canvas 元素:canvas 元素:canvas 元素:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
HTML5 新特性(2)--Canvas相关推荐
- 开发者值得关注的HTML5新特性:Canvas
随着IE 10的即将发布正式版,标志者HTML5的时代已经越来离我们越来越近了,尽管HTML 5的最终标准草案还没最终敲定,但象Chrome,Firefox等浏览器对HTML5的标准已经支持的十分完善 ...
- html5两条直线,Html5新特性用canvas标签画多条直线附效果截图
下面例子为用canvas标签画多条直线 复制代码代码如下: index_three 您的浏览器不支持canvas标签. //获取Canvas对象(画布) var canvas = document.g ...
- html5 strongeaseinout,HTML5新特性 之canvas标签(Day1-4)(示例代码)
canvas 1.什么是canvas? 1.1 是HTML5提供的一种新标签 1.2 canvas是一个矩形区域的画布,可以用JavaScript在上面绘画.控制其每一个像素 1.3 canvas 拥 ...
- html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- html5加js兼容性辅助,解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题...
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...
- HTML中三维特性,前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
- html5 logo svg,HTML5新特性之用SVG绘制微信logo
html5新特新html5 中的一些有趣的新特性:1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的更好的支持 4.新的特殊内容元素,比如 ...
- html5储存类型特点,避免踩雷!你不得不知的 HTML5 “新”特性
什么是 HTML5 HTML的发展历程如下: 产生于1990年 1997年 HTML4 出现,成为互联网开发的标准 2008年,HTML5正式出现,2002年趋于稳定 HTML在发展过程中,HTML4 ...
- html做微信logo,HTML5新特性之用SVG绘制微信logo
原标题:HTML5新特性之用SVG绘制微信logo 这篇文章主要介绍了HTML5新特性之用SVG绘制的微信logo的相关资料,需要的朋友可以参考下. HTML5新特新 HTML5中的一些有趣的新特性: ...
- 【HTML5新特性】
HTML5新特性 一.语义标签 二.增强型表单 1. input特性 2. 五个表单元素 3. 表单属性 三.音频和视频 四.canvas 五.SVG 六.地理位置 七.拖放API 八.web Wor ...
最新文章
- 自动驾驶十字路口解决方案
- 力扣(LeetCode)刷题,简单题(第10期)
- mysql日志文件相关的配置【2】
- 一份来自贾扬清的AI修炼指南:不存在算法工程师,调参侠没有市场
- 不同类的方法 事务问题_深入理解 Spring 事务原理
- 【Android 逆向】Android 系统文件分析 ( /proc/ 目录文件分析 | 记录系统和进程信息 | version 内核版本信息文件 )
- 在 Java 中,如何批量读取本项目资源目录下的所有文件
- Spring 教程03
- 安装phpssdb扩展:
- win10用Eclipse+OpenJTag对S3C2440开发板进行动态调试
- ES2020的新特性解读
- CentOS7.x Hadoop集群搭建
- Faster R-CNN源码中RPN的解析(自用)
- Fisher准则一维聚类
- 计算机省二c语言编程改错题,2013年计算机二级C语言上机试题六十九
- Google退出中国的三大原因和四大后果(转载)
- html如何生成条形码,使用jsbarcode生成条形码
- 百度长期不收录网站怎么办?9个方法解决不收录
- 常用的邮箱有哪些,可用好用的邮箱大全推荐
- cocos2dx实例开发之经典三消