html5相关canvas

闲来无事，重新看了看h5的canvas，并且随意搜了一点相关的优秀演示。

canvas是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

基本就是说canvas可以做些非常好玩的东西，比如一个网页上的图像，结合H5的排版优势，可以做出非常漂亮的页面。

看了不少canvas的优秀作品，被一个非常有意思的树给吸引，虽然以现在的水平并不能做出，但是这个作品可以拖动树进行摆动。

看了下源代码对于目前的我来说还有些许困难。相信接下来的学习可以做出如此效果：

http://www.html5tricks.com/demo/html5-canvas-drag-tree/index.html 链接在此

时间： 2024-10-14 22:53:34

html5相关canvas的相关文章

html5 之 canvas 相关知识(一)概念及定义

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. <canvas> 标签只是图形容器,它没有自己的行为,需要定义API 支持脚本化客户端绘图操作. 创建 Canvas 元素 canvas的代码很简单,定义一个ID以及宽和高.这里强调一点:canvas的宽高必须写在元素上,如果用样式定义,不能改变其图片的比例 <canva

浅尝HTML5之canvas

转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和nav,audio,datalist,details,video,progress,embed等标签 section 标签用于标识页面上的重要内容部分.该标签有点类似于将一本书分成几个章节. article 标签标识了 Web 页面中的主要内容. aside 标签表示arcitle元素内容之外的.与

HTML5程序设计 Canvas API

检测浏览器支持情况 <script type="text/javascript"> try { document.createElement("Canvas").getContext("2d"); document.getElementById("support").innerHTML = "OK"; } catch (e) { document.getElementById("sup

HTML5 画布 Canvas

利用html5的canvas元素使用 JavaScript 在网页上绘制图像. 通过规定尺寸.颜色和位置,来绘制一个圆: <!DOCTYPE htma> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #3CF;"> Your browser does not

html5中用canvas画八大行星围绕太阳转

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&

HTML5 画布canvas元素

HTML5 画布canvas元素 HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小看了这个画布,它能实现无限的可能性.接下来我们从最简单的部分开始,逐步认识Canvas的强大功能. 1.在页面中添加canvas元素: 默认情况下,Canvas所创建的矩形区域大小为宽300像素,高150像素,不过我们可以使用width和height属性来自定义画布

HTML5在canvas中绘制复杂形状附效果截图

HTML5在canvas中绘制复杂形状附效果截图一.绘制复杂形状或路径在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路径. closePath() : 通过绘制一条当前点到路径起点的线段来闭合形状. fill() , stroke() : 填充形状或绘制空心形状. moveTo() : 将当前点移动到点(x,y). lineTo() : 从当前点绘制一条直线到点(x,y). arc(x,y,r,sAngle,eAn

HTML5之Canvas画正方形

1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML5之Canvas画正方形</title> <script type="text/javascript"> function drawFour(id) { //获取canvas元素 var canvas = document.getElementById("

HTML5之Canvas画圆形

1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML5之Canvas画圆形</title> </head> <body onLoad="drawFour('canvas')"> <canvas id="canvas" width="1200" height=&