2024-11-24 厉飞雨 阅读(4) 评论(0) 赞(0)

HTML5的到来，让互联网刮起一阵"飓风"，HTML5凭借语义性、兼容性和不需要第三方依赖的API迅速席卷了整个互联网，这是一场革命性的技术变革。随着谷歌浏览器的崛起，HTML5日渐成熟了，与此同时，我们即将迎接新的版本HTML5.1。 ![5.1.png](http://static.51tbox.com/static/2024-11-23/col/2c...

2024-11-24 厉飞雨 阅读(6) 评论(0) 赞(0)

**HTML5 Canvas** 元素允许我们在[HTML5](/Html5/)页面中的canvas区域自由的绘制图形。 ![61.png](http://static.51tbox.com/static/2024-11-23/col/9cea126b38c4a7a748e40797e2ab4808/16a38fede9314aff9143b18aaa104418.png.j...

2024-11-24 厉飞雨 阅读(6) 评论(0) 赞(0)

垂直对齐，使用CSS很容易实现，如果想在[HTML5](/Html5/) [Canvas](/?tags=Canvas)中实现垂直对齐，如何设置呢，这就是今天要分享的笔记。 ![61.png](http://static.51tbox.com/static/2024-11-23/col/f4373572e838f7e9d3c49921a6c82e00/b9cb9b1859...

2024-11-24 厉飞雨 阅读(7) 评论(0) 赞(0)

我们可以在[HTML5](/Html5/) canvas上绘制出图形或文字的阴影效果。canvas的阴影效果非常简单，通过一些简单的设置，就可以自动在图片或文字下面生成相应的阴影。下面是一个简单的例子： ![61.png](http://static.51tbox.com/static/2024-11-23/col/c4010a0ccca3c1e20d4c5a8eb82d6c...

2024-11-24 厉飞雨 阅读(5) 评论(0) 赞(0)

要在[HTML5](/Html5/) canvas中绘制图像动画效果，你需要绘制出每一帧的图像，然后在一个极短的时间内从一帧过渡到下一帧，形成动画效果。这其实是一种视觉欺骗，原理就像播放电影一样，胶片上每一格是一帧图片，然后快速的播放它们，在人的眼睛看来就是一个完整的动画效果。 ![61.png](http://static.51tbox.com/static/2024-11...

2024-11-24 厉飞雨 阅读(6) 评论(0) 赞(0)

当我们在[HTML5](/Html5/) canvas中使用2D上下文来绘制图形的时候，2D上下文会处于某种状态中。你可以通过操纵2D上下文的属性来设置这些状态，例如`fillStyle`属性和`strokeStyle`属性。所有的这些操作被称为2D上下文的`state`（状态）。 ![61.png](http://static.51tbox.com/static/2024-...

2024-11-24 厉飞雨 阅读(4) 评论(0) 赞(0)

你可以对任何在[HTML5](/Html5/) canvas中绘制的图形应用转换效果。下面是可以使用的转换列表：  ...

2024-11-24 厉飞雨 阅读(4) 评论(0) 赞(0)

随着技术向前的推进，SVG相关的讨论也越渐频繁。为了紧跟时代的步伐，我也开始步入SVG相关技术的探索与学习之中。从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程、译文或案例等。感兴趣的同学可以跟随着教程一起了解与学习SVG相关的知识与技巧。 ### 什么是SVG SVG是**"Scalable Vector Graphics"*...

2024-11-24 厉飞雨 阅读(6) 评论(0) 赞(0)

上周看到有一篇关于[CSS滤镜效果函数](http://www.vanseodesign.com/css/named-filter-effects/)的文章，其中的效果函数相对来说比较容易理解，而且上手难度低。但是，这种方式仅仅是添加CSS滤镜效果众多方式中最弱的一种。今天让我们来看一看**滤镜基元**，这是为图片和元素添加滤镜效果另外一种更加强大的方法。 相较于效果函数，滤...

2024-11-24 厉飞雨 阅读(5) 评论(0) 赞(0)

在我们前面所有[HTML5](/Html5/) canvas的例子中，图形的绘制都是一个图形位于另一个图形之上的。我们可以通过设置`globalCompositeOperation`属性来修改这个默认的行为。换句话来说，我们可以设置绘制的图形与已经绘制在canvas上的图形的合成模式。 ![61.png](http://static.51tbox.com/static/202...