html长⽅形代码_html基础代码⼤全
⼀、canvas 简介
是 HTML5 新增的，⼀个可以使⽤脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以⽤来制作照⽚集或者制作简单(也不是那么简单)的动画，甚⾄可以进⾏实时视频处理和渲染。
它最初由苹果内部使⽤⾃⼰ MacOS X WebKit 推出，供应⽤程序使⽤像仪表盘的构件和 Safari 浏览器使⽤。后来，有⼈通过 Gecko 内核的浏览器 (尤其是 Mozilla和Firefox)，Opera 和 Chrome 和超⽂本⽹络应⽤技术⼯作组建议为下⼀代的⽹络技术使⽤该元素。
Canvas 是由 HTML 代码配合⾼度和宽度属性⽽定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通⽤的⼆维 API，通过⼀套完整的绘图函数来动态⽣成图形。
Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始⽀持 , Internet Explorer 从 IE9 开始 。Chrome 和 Opera 9+ 也⽀持 。
⼆、Canvas基本使⽤
canvas元素
html5颜代码2.1 元素
看起来和  标签⼀样，只是 只有两个可选的属性 width、heigth 属性，⽽没有 src、alt 属性。
如果不给 设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使⽤ css 属性来设置宽⾼，但是如宽⾼属性和初始⽐例不⼀致，他会出现扭曲。所以，建议永远不要使⽤ css 属性来设置 的宽⾼。
替换内容
由于某些较⽼的浏览器(尤其是 IE9 之前的 IE 浏览器)或者浏览器不⽀持 HTML 元素 ，在这些浏览器上你应该总是能展⽰替代内容。
⽀持 的浏览器会只渲染 标签，⽽忽略其中的替代内容。不⽀持 的浏览器则 会直接渲染替代内容。
⽤⽂本替换：
实例
⽤  替换：
实例
结束标签 不可省略。
与  元素不同， 元素需要结束标签()。如果结束标签不存在，则⽂档的其余部分会被认为是替代内容，将不会显⽰出来。
2.2 渲染上下⽂(Thre Rending Context)
会创建⼀个固定⼤⼩的画布，会公开⼀个或多个渲染上下⽂(画笔)，使⽤渲染上下⽂来绘制和处理要展⽰的内容。
我们重点研究 2D 渲染上下⽂。 其他的上下⽂我们暂不研究，⽐如， WebGL 使⽤了基于 OpenGL ES的3D 上下⽂ ("experimental-webgl") 。
实例
2.3 检测⽀持性
实例
2.4 代码模板
2.5 ⼀个简单的例⼦
以下实例绘制两个长⽅形：
实例
三、绘制形状
3.1 栅格 (grid) 和坐标空间
如下图所⽰，canvas 元素默认被⽹格所覆盖。通常来说⽹格中的⼀个单元相当于 canvas 元素中的⼀像素。栅格的起点为左上⾓，坐标为(0,0) 。所有元素的位置都相对于原点来定位。所以图中蓝⾊⽅形左上⾓的坐标为距离左边(X 轴)x 像素，距离上边(Y 轴)y 像素，坐标为(x,y)。
后⾯我们会涉及到坐标原点的平移、⽹格的旋转以及缩放等。
实例
3.2 绘制矩形
只⽀持⼀种原⽣的图形绘制：矩形。所有其他图形都⾄少需要⽣成⼀种路径 (path)。不过，我们拥有众多路径⽣成的⽅法让复杂图形的绘制成为了可能。
canvast 提供了三种⽅法绘制矩形：
1、fillRect(x, y, width, height)：绘制⼀个填充的矩形。
2、strokeRect(x, y, width, height)：绘制⼀个矩形的边框。
3、clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。
说明：这 3 个⽅法具有相同的参数。
x, y：指的是矩形的左上⾓的坐标。(相对于canvas的坐标原点)
width, height：指的是绘制的矩形的宽和⾼。
functiondraw(){varcanvas = ElementById('tutorial'); if(!Context)return; varctx =
ect(10, 70, 100, 50); //绘制矩形边框}draw();
今天我们先写到这⾥ 明天继续写！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。