搜索
您的当前位置:首页正文

HTML5Canvas概述_html5教程技巧

2023-11-26 来源:环绕娱乐网
是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。右面的图象展示了一些的应用示例,我们将会在此教程中看到他们的实现。

最先在苹果公司(Apple)的Mac OS X Dashboard上被引入,而后被应用于Safari。基于Gecko1.8的浏览器,例如Firefox 1.5,也支持这个新元素。元素是WhatWG Web applications 1.0也就是大家都知道的HTML 5标准规范的一部分。

在本教程中,我将试着讲述如何在你自己的网页中使用元素。提供的示例应该会给你些清晰概念,即用能做些什么的。这些示例也可作为你应用的起点。

开始使用之前 用元素并不难,只要你具有HTML和 JavaScript的基础知识。

如上所述,并不是所有现代浏览器都支持元素,所以你需要 Firefox 1.5或更新版本、或者其他基于Gecko的浏览器例如Opera 9、或者最近版本的Safari才能看到所有示例的动作。

元素

Let's start this tutorial by looking at the element itself. 让我们从元素的定义开始吧。

This looks a lot like the element, the only difference is that it doesn't have the src and alt attributes. 看起来很像,唯一不同就是它不含 srcalt 属性。The element has only two attributes - width and height. These are both optional and can also be set using DOM properties or CSS rules.它只有两个属性,width 和 height,两个都是可选的,并且都可以 DOM 或者 CSS 来设置。 When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high.如果不指定width 和 height,默认的是宽300像素,高150像素。The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size. (If your renderings seem distorted, try specifying your width and height attributes explicitly in the attributes, and not with CSS.)虽然可以通过 CSS 来调整canvas的大小,但渲染图像会缩放来适应布局的(如果你发现渲染结果看上去变形了,不必一味依赖CSS,可以尝试显式指定canvas的width 和 height 属性值)。

The id attribute isn't specific to the element but is one of default HTML attributes which can be applied to (almost) every HTML element (like class for instance). It's always a good idea to supply an id because this makes it much easier to identify it in our script.id 属性不是专享的,就像标准的HTLM标签一样,任何一个HTML元素都可以指定其 id 值。一般,为元素指定 id 是个不错的主意,这样使得在脚本中应用更加方便。

The element can be styled just like any normal image (margin, border, background, etc). These rules however don't affect the actual drawing on the canvas. We'll see how this is done later in this tutorial. When no styling rules are applied to the canvas it will initially be fully transparent. 元素可以像普通图片一样指定其样式(边距,边框,背景等等)。然而这些样式并不会对canvas实际生成的图像产生什么影响。下面我们会看到如何应用样式。如果不指定样式,canvas默认是全透明的。

替用内容

Because the element is still relatively new and isn't implemented in some browsers (such as Firefox 1.0 and Internet Explorer), we need a means of providing fallback content when a browser doesn't support the element.

因为 相对较新,有些浏览器并没实现,如Firefox 1.0 和 Internet Explorer,所以我们需要为那些不支持canvas的浏览器提供替用显示内容。

Luckily this is very straightforward: we just provide alternative content inside the canvas element. Browsers who don't support it will ignore the element completely and render the fallback content, others will just render the canvas normally.For instance we could provide a text description of the canvas content or provide a static image of the dynamically rendered content. This can look something like this:

我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容,而支持的浏览器则会正常地渲染canvas。例如,我们可以把一些文字或图片填入canvas内,作为替用内容:

 current stock price: $3.15 +0.15 
结束标签
是必须的

In the Apple Safari implementation, is an element implemented in much the same way is; it does not have an end tag. However, for to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation requires an end tag ().

在Apple Safari里,的实现跟很相似,它并不没有结束标签。然而,为了使 能在web的世界里广泛适用,需要给替用内容提供一个容身之所,因此,在Mozilla的实现里结束标签()是必须的。

If fallback content is not needed, a simple will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.

如果没有替用内容, 对 Safari 和 Mozilla 是完全兼容的—— Safari 会简单地忽略结束标签。

If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).

如果有替用内容,那么可以用一些 CSS 技巧来为并且仅为 Safari 隐藏替用内容,因为那些替用内容是需要在 IE 里显示但不需要在 Safari 里显示。

渲染上下文(Rendering Context)

creates a fixed size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. We'll focus on the 2D rendering context, which is the only currently defined rendering context. In the future, other contexts may provide different types of rendering; for example, it is likely that a 3D context based on OpenGL ES will be added.

创建的固定尺寸的绘图画面开放了一个或多个渲染上下文(rendering context),我们可以通过它们来控制要显示的内容。我们专注于2D 渲染上,这也是目前唯一的选择,可能在将来会添加基于OpenGL ES 的 3D 上下文。

The is initially blank, and to display something a script first needs to access the rendering context and draw on it. The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context.

初始化是空白的,要在上面用脚本画图首先需要其渲染上下文(rendering context),它可以通过 canvas 元素对象的 getContext 方法来获取,同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。

var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');

In the first line we retrieve the canvas DOM node using the getElementById method. We can then access the drawing context using the getContext method.

上面第一行通过 getElementById 方法取得 canvas 对象的 DOM 节点。然后通过其 getContext 方法取得其画图操作上下文。

检查浏览器的支持

The fallback content is displayed in browsers which do not support ; scripts can also check for support when they execute. This can easily be done by testing for the getContext method. Our code snippet from above becomes something like this:

除了在那些不支持 的浏览器上显示替用内容,还可以通过脚本的方式来检查浏览器是否支持 canvas 。方法很简单,判断 getContext 是否存在即可。

var canvas = document.getElementById('tutorial');if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here} else { // canvas-unsupported code here}
代码模板

Here is a minimalistic template, which we'll be using as a starting point for later examples. You can download this file to work with on your system.

我们会用下面这个最简化的代码模板来(后续的示例需要用到)作为开始,你可以 下载文件 到本地备用。

 Canvas tutorial 

If you look at the script you'll see I've made a function called draw, which will get executed once the page finishes loading (via the onload attribute on the body tag). This function could also have been called from a setTimeout, setInterval, or any other event handler function just as long the page has been loaded first.

细心的你会发现我准备了一个名为 draw 的函数,它会在页面装载完毕之后执行一次(通过设置 body 标签的 onload 属性),它当然也可以在 setTimeout,setInterval,或者其他事件处理函数中被调用。

一个简单的例子

To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples.

作为开始,来一个简单的吧——绘制两个交错的矩形,其中一个是有alpha透明效果。我们会在后面的示例中详细的让你了解它是如何运作的。

 

小编还为您整理了以下内容,可能对您也有帮助:

HTML5中Canvas的事件处理介绍

DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到。比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行操作。比如有一个 元素,可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用,Canvas使用的是另外一套机制,无论在Canvas上绘制多少图形,Canvas都是一个整体,图形本身实际都是Canvas的一部分,不可单独获取,所以也就无法直接给某个图形增加JavaScript事件。

  Canvas的*

在Canvas里,所有图形都绘制在帧上,绘制方法不会将绘制好的图形元素作为一个返回值输出,js也无法获取到已经绘制好的图形元素。比如:

代码如下:

cvs = document.getElementById('mycanvas');

ctx = canvas.getContext('2d');

theRect = ctx.rect(10, 10, 100, 100);

ctx.stroke();

console.log(theRect); //undefined

这段代码在canvas标签里绘制了一个矩形,首先可以看到绘制图形的rect方法没有返回值。如果打开浏览器的开发者工具,还可以看到canvas标签内部没有增加任何内容,而在js里获取到的canvas元素以及当前的上下文,也都没有任何表示新增图形的内容。

所以,前端常用的dom方法在canvas里是不适用的。比如点击上面Canvas里的矩形,实际点击的是整个Canvas元素。

  给Canvas元素绑定事件

由于事件只能达到Canvas元素这一层,所以,如果想进一步深入,识别点击发生在Canvas内部的`哪一个图形上,就需要增加代码来进行处理。基本思路是:给Canvas元素绑定事件,当事件发生时,检查事件对象的位置,然后检查哪些图形覆盖了该位置。比如上面的例子里画过一个矩形,该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里,就可以视为点击了该矩形,也就可以手动触发矩形需要处理的点击事件。思路其实比较简单,但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率,有些地方还需要重新判断事件类型,设置要重新定义一个Canvas内部的捕获和冒泡机制。

首先要做的,是给Canvas元素绑定事件,比如Canvas内部某个图形要绑定点击事件,就需要通过Canvas元素代理该事件:

  代码如下:

cvs = document.getElementById('mycanvas');

cvs.addEventListener('click', function(e){

//...

}, false);

接下来需要判断事件对象发生的位置,事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持,Safari也打算移除,所以要做一些兼容写法:

代码如下:

function getEventPosition(ev){

var x, y;

if (ev.layerX || ev.layerX == 0) {

x = ev.layerX;

y = ev.layerY;

} else if (ev.offsetX || ev.offsetX == 0) { // Opera

x = ev.offsetX;

y = ev.offsetY;

}

return {x: x, y: y};

}

//注:使用上面这个函数,需要给Canvas元素的position设为absolute。

现在有了事件对象的坐标位置,下面就要判断Canvas里的图形,有哪些覆盖了这个坐标。

isPointInPath方法

Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标,比如:

代码如下:

cvs = document.getElementById('mycanvas');

ctx = canvas.getContext('2d');

ctx.rect(10, 10, 100, 100);

ctx.stroke();

ctx.isPointInPath(50, 50); //true

ctx.isPointInPath(5, 5); //false

接下来增加一个事件判断,就可以判断一个点击事件是否发生在矩形上:

代码如下:

cvs.addEventListener('click', function(e){

p = getEventPosition(e);

if(ctx.isPointInPath(p.x, p.y)){

//点击了矩形

}

}, false);

以上就是处理Canvas事件的基本方法,但是上面的代码还有局限,由于isPointInPath方法仅判断当前上下文环境中的路径,所以当Canvas里已经绘制了多个图形时,仅能以最后一个图形的上下文环境来判断事件,比如:

代码如下:

HTML5中Canvas的事件处理介绍

DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到。比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行操作。比如有一个 元素,可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用,Canvas使用的是另外一套机制,无论在Canvas上绘制多少图形,Canvas都是一个整体,图形本身实际都是Canvas的一部分,不可单独获取,所以也就无法直接给某个图形增加JavaScript事件。

  Canvas的*

在Canvas里,所有图形都绘制在帧上,绘制方法不会将绘制好的图形元素作为一个返回值输出,js也无法获取到已经绘制好的图形元素。比如:

代码如下:

cvs = document.getElementById('mycanvas');

ctx = canvas.getContext('2d');

theRect = ctx.rect(10, 10, 100, 100);

ctx.stroke();

console.log(theRect); //undefined

这段代码在canvas标签里绘制了一个矩形,首先可以看到绘制图形的rect方法没有返回值。如果打开浏览器的开发者工具,还可以看到canvas标签内部没有增加任何内容,而在js里获取到的canvas元素以及当前的上下文,也都没有任何表示新增图形的内容。

所以,前端常用的dom方法在canvas里是不适用的。比如点击上面Canvas里的矩形,实际点击的是整个Canvas元素。

  给Canvas元素绑定事件

由于事件只能达到Canvas元素这一层,所以,如果想进一步深入,识别点击发生在Canvas内部的`哪一个图形上,就需要增加代码来进行处理。基本思路是:给Canvas元素绑定事件,当事件发生时,检查事件对象的位置,然后检查哪些图形覆盖了该位置。比如上面的例子里画过一个矩形,该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里,就可以视为点击了该矩形,也就可以手动触发矩形需要处理的点击事件。思路其实比较简单,但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率,有些地方还需要重新判断事件类型,设置要重新定义一个Canvas内部的捕获和冒泡机制。

首先要做的,是给Canvas元素绑定事件,比如Canvas内部某个图形要绑定点击事件,就需要通过Canvas元素代理该事件:

  代码如下:

cvs = document.getElementById('mycanvas');

cvs.addEventListener('click', function(e){

//...

}, false);

接下来需要判断事件对象发生的位置,事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持,Safari也打算移除,所以要做一些兼容写法:

代码如下:

function getEventPosition(ev){

var x, y;

if (ev.layerX || ev.layerX == 0) {

x = ev.layerX;

y = ev.layerY;

} else if (ev.offsetX || ev.offsetX == 0) { // Opera

x = ev.offsetX;

y = ev.offsetY;

}

return {x: x, y: y};

}

//注:使用上面这个函数,需要给Canvas元素的position设为absolute。

现在有了事件对象的坐标位置,下面就要判断Canvas里的图形,有哪些覆盖了这个坐标。

isPointInPath方法

Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标,比如:

代码如下:

cvs = document.getElementById('mycanvas');

ctx = canvas.getContext('2d');

ctx.rect(10, 10, 100, 100);

ctx.stroke();

ctx.isPointInPath(50, 50); //true

ctx.isPointInPath(5, 5); //false

接下来增加一个事件判断,就可以判断一个点击事件是否发生在矩形上:

代码如下:

cvs.addEventListener('click', function(e){

p = getEventPosition(e);

if(ctx.isPointInPath(p.x, p.y)){

//点击了矩形

}

}, false);

以上就是处理Canvas事件的基本方法,但是上面的代码还有局限,由于isPointInPath方法仅判断当前上下文环境中的路径,所以当Canvas里已经绘制了多个图形时,仅能以最后一个图形的上下文环境来判断事件,比如:

代码如下:

html5 canvas是做什么的

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

HTML5 Canvas基本绘制线条教程

HTML5 Canvas基本绘制线条教程

  怎么画线条?和现实中画画差不多:

  1.移动画笔,使画笔移动至绘画的开始处

  2.确定第一笔的停止点

  3.规划好之后,选择画笔(包括画笔的粗细和颜色等)

  4.确定绘制

  因为Canvas是基于状态的绘制(很重要,后面会解释),所以前面几步都是在确定状态,最后一步才会具体绘制。

  1.移动画笔(moveTo())

  之前我们获得了画笔context,所以以此为例,给出改方法的使用实例——context.moveTo(100,100)。这句代码的意思是移动画笔至(100,100)这个点(单位是px)。记住,这里是以canvas画布的左上角为笛卡尔坐标系的原点,且y轴的正方向向下,x轴的正方向向右。

  2.笔画停点(lineTo())

  同理,context.lineTo(600,600)。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚,这里的moveTo()``lineTo()都只是状态而已,是规划,是我准备要画,还没有开始画,只是一个计划而已!

  3.选择画笔

  这里我们暂且只设置一下画笔的颜色和粗细。

  context.lineWidth = 5,这句话的意思是设置画笔(线条)的粗细为10px。

  context.strokeStyle = "#AA394C",这句话的意思是设置画笔(线条)的颜色为玫红色。

  因为Canvas是基于状态的绘制,所以我们在选择画笔粗细和颜色的同时,其实也是选择了线条的粗细和颜色。

  4.确定绘制

  确定绘制只有两种方法,fill()和stroke(),有点绘画基础的应该知道,前者是指填充,后者是指描边。因为我们只是绘制线条,所以只要描边就可以了。调用代码context.stroke()即可。

  画一个线条

  不就一条线段吗!废话了这么多!那我们就开始画吧。

  JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!

  运行结果:

我还标注了一个页面解析图,供大家参考。

这里我将原本

  标签中的width和height去掉了,但在JavaScript代码中设置了canvas对象的width和height的属性。

  小结:要设置画布的大小,只有这两种方法

  1.在标签中设置;

  2.在JS代码中设置canvas的'属性.

  怎么样,是不是非常的酷。接下来我们要加快脚步了,绘制一个多线条组成的图形。是不是感觉自己离艺术家又进了一步呢?别看这只是简简单单的一条线段,这一画只是我们的一小步,但却是人类的一大步!

  绘制折线

  上面我们已经成功绘制了一条线段。那么,如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢?

  聪明的小伙伴肯定已经想到了,这还不简单,复用lineTo()就可以了。下面我就献丑随便画了一条优美的折线~

  JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!

  运行结果:

绘制多条折线

  那同理,我们要绘制多条样式各不相同的折线怎么办呢?比如我们在这里画三条折线,分别是红色、蓝色、黑色。聪明的小伙伴肯定想到了,这还不简单,只需要平移一下再改下画笔颜色就行了。代码格式都一样的,复制就可以了。代码如下。

  JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!

  运行结果:

咦?是不是很奇怪?说好的先红色,再蓝色,再黑色呢?怎么全是黑色了?其实,这里的原因是我之前一直强调的一点——Canvas是基于状态的绘制。

  什么意思呢?其实这段代码每次使用stroke()时,它都会把之前设置的状态再绘制一遍。第一次stroke()时,绘制一条红色的折线;第二次stroke()时,会再重新绘制之前的那条红色的折线,但是这个时候的画笔已经被更换成蓝色的了,所以画出的折线全是蓝色的。换言之,strokeStyle属性被覆盖了。同理,第三次绘制的时候,画笔颜色是最后的黑色,所以会重新绘制三条黑色的折线。所以,这里看到的三条折线,其实绘制了3次,一共绘制了6条折线。

  那么,我想绘制三条折线,难道就没有办法了吗?艺术家之魂到此为止了么?没救了么?不,还有办法。

  使用beginPath()开始绘制

  为了让绘制方法不重复绘制,我们可以在每次绘制之前加上beginPath(),代表下次绘制的起始之处为beginPath()之后的代码。我们在三次绘制之前分别加上context.beginPath()。

  JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!

可以看到,这里得到了我们预想的结果。因为使用了beginPath(),所以这里的绘制过程如我们所想的那样,只绘制了三次,而且每次只绘制一条折线。beginPath()是绘制设置状态的起始点,它之后代码设置的绘制状态的作用域结束于绘制方法stroke()、fill()或者closePath(),至于closePath()之后会讲到。

  所以我们每次开始绘制前都务必要使用beginPath(),为了代码的完整性,建议大家在每次绘制结束后使用closePath()。 ;

环绕娱乐网还为您提供以下相关内容希望对您有帮助:

HTML5中Canvas的事件处理介绍

首先要做的,是给Canvas元素绑定事件,比如Canvas内部某个图形要绑定点击事件,就需要通过Canvas元素代理该事件:代码如下:cvs = document.getElementById('mycanvas');cvs.addEventListener('click', function(e){ //...},...

HTML5 Canvas基础教程的内容简介

《HTML5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让读者对Canvas建立...

HTML5 Canvas基本绘制线条教程

1.在标签中设置;2.在JS代码中设置canvas的'属性.怎么样,是不是非常的酷。接下来我们要加快脚步了,绘制一个多线条组成的图形。是不是感觉自己离艺术家又进了一步呢?别看这只是简简单单的一条线段,这一画只是我们的...

HTML5中canvas与SVG有什么区别

(5)canvas取决于分辨率。SVG与分辨率无关。(6)SVG具有更好的文本渲染,而Canvas不能很好的渲染,渲染中的SVG可能比Canvas慢,特别是应用了大量的DOM。(7)画布更适合渲染较小的区域。SVG渲染更好的更大区域。SVG与...

如何使用html5中的canvas标签,画一个圆及一个矩形

首先需要建立一个HTML5的网页,方法是:进入DW后,选择:文件-->新建 在弹出的对话框中选择文件类型为Html5 选择“创建”后,即会形成一个空白网页,选择“文件”--"保存“起名为:juxing 这个名字可以依据自己的喜好起,...

html5 canvas是做什么的

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

html5中如何绘制基本

html5中的常用的绘制图形 绘制矩形 创建canvas元素→取得上下文(使用canvas对象的getcontent方法获得上下文)→填充绘制边框→设定样式→指定线宽、颜色。代码如下图:可以用clearRect方法擦除指定区域的图形,使矩形区域颜色变透明...

如何用HTML5 CANVAS绘制文字

我们可以在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色。绘制文字的字体由2D上下文的font属性来控制。如果你需要使用颜色来填充文字或制作描边文字,可以使用2D上下文的fillStyle和strokeStyle属性来完成。要在...

HTML5有哪些新特征_html5教程技巧

一、HTML5 中的一些有趣的新特性:用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素,比如 article、footer、header、nav、section新的表单控件,比如 calendar、date、...

如何使用HTML5canvas实现雪花飘落

这篇文章主要为大家详细介绍了HTML5 canvas实现雪花飘落特效,效果实现引人入胜,很逼真的动画效果,感兴趣的小伙伴们可以参考一下看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的...

Top