HTML5 canvas准备知识

  利用canvas来进行画图工作。因此,我们有必要进行一些画图方面的术语说明.

  一、画布

  在日常生活中,如果我们要画画,可以找纸、板、画布等等工具。而在网页元素中,我们只需要定义一个标签即可。

<canvas id="c" style="border:1px solid black;"><p>your browser is not support.</p></canvas>

  其中,canvas就是一块画布,而标签里面的p,则是为兼容低版本浏览器而使用。如果,你在访问该页面能够看到p标签里面的内容,则说明,你当前使用的浏览器还不支持html5;相反,则是看到矩形。

  使用画布的方法:

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

  二、画笔

  在有了画布之后,如果我们想要往其中涂鸦,则需要"画笔"这样的工具。

  利用canvas来获取画笔的方法:

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

  其中getContext方法就是用来拿笔的,但这里还有个参数:2d.其为默认传递的参数值。这是什么意思呢?这个可以看作是画笔的种类。

  既然有2d,那么就会有3d了?以后估计会有,但现在没有。所以我们先用这只2d的笔。

  三、橡皮

  在画布,如果发现有些地方的内容需要去除的话,我们可以使用"橡皮"来进行操作。

  利用canvas来使用橡皮的方法:

ctx.clearRect(X1,Y1,X2,Y2);

  四、坐标 

  2d世界,就是平面,在一个平面上确定一个点,需要两个值,x坐标和y坐标。这是一个很重要的基础概念。

  canvas的原点是左上角,跟网页的定位是一致的。

  五、路径

  利用坐标点,成线。由线成面

时间: 2024-12-08 08:05:38

HTML5 canvas准备知识的相关文章

Html5 Canvas小知识

1.HTML5 canvas moveTo() 方法 2.HTML5 canvas lineTo() 方法

html5 canvas 详细使用教程

导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画 结语.demo下载   前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.

HTML5 canvas 绘制精美的图形

HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.01 版本规范.它还引入了几个新元素和属性,它们适用许多使用 web 页面的领域 — 音频.视频.图形.数据存储.内容呈现,等等.本文主要关注图形方面的增强:canvas. 新的 HTML5 canvas 是一个原生 HTML 绘图簿,用于 JavaScript 代码,不使用第三方工具.跨

canvas基础知识

低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas.检测<canvas id="canvas" width="150" height="200" > 你的浏览器不支持canvas</canvas>var canvas = document.getElementById('canvas');if(canvas.getContext) alert('支持canvas'); >> 绘

赠书:HTML5 Canvas 2d 编程必读的两本经典

赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide(斧子演示,www.axeslide.com).在这个领域也积累了一些 经验,希望有机会和大家分享.今天是要给大家推荐两本这方面的书,同时会送一本书给大家. 要介绍的第一本书是我学习Canvas开发的入门书——<HTML5 Canvas核心技术:图形.动画与游戏开发>. 此书作者David Gear

使用html5 canvas绘制圆形或弧线

注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链接以了解使用html5 canvas绘制图形的完整内容. 在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: arc(x, y, radius, startRad, endRad, anticlockwise) 在canvas画

Html5 Canvas斗地主游戏

过完年来公司,没什么事,主管说研究下html5 游戏,然后主管就给了一个斗地主的demo,随后我就开始看代码, 现在我看了html5以及canvas相关知识和斗地主的demo后,自己用demo上的素材试着写了个斗地主,代码没重构好,欢迎赐教. 演示地址:CanVas斗地主 话不多说,下面就一步一步解释下吧 只有一个common.js文件 1.资源类 1 var Resource = Class.create(); 2 $.extend(Resource.prototype, { 3 initia

自己写的HTML5 Canvas + Javascript五子棋

看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这个小练习. 基本思路是这样的: 使用Canvas绘制棋盘.棋子. 用二维数组保存棋盘状态. 设置一个flag,用以标识落子顺序. 点击时,在数组中检测当前点击位置是否存在棋子,若存在,则不落子:如游戏已结束,亦不落子. 落子时,更新数组,并将当前落子所在的行.列.左上-右下列.左下-右上列四个方向的

HTML5—canvas绘制图形(1)

1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“画布”,我们可以利用js脚本在“画布”上绘制图形. 1.1canvas元素 在利用canvas绘制图形之前,我们首先需要在页面中放置一个canvas元素,如下代码: <canvas id="mycanvas" width="400" height="40