51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

HTML

【SVG】HTML元素上的SVG滤镜

【SVG】HTML元素上的SVG滤镜

厉飞雨 阅读(22) 评论(0) 赞(1)

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

HTML5 Canvas:合成模式

HTML5 Canvas:合成模式

厉飞雨 阅读(25) 评论(0) 赞(3)

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

HTML5 Canvas:绘制渐变色

HTML5 Canvas:绘制渐变色

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

[HTML5](/Html5/) Canvas渐变是一种用于填充或描边图形的颜色模式。渐变色是由不同的颜色进行过渡,而不是单一的颜色。先来看几个canvas渐变色的例子: ![61.png](http://static.51tbox.com/static/2024-11-23/col/01ad92318ed7548a75caf8516dec2da4/beb2a84dcab44...

HTML5 Canvas:绘制图片

HTML5 Canvas:绘制图片

厉飞雨 阅读(18) 评论(0) 赞(2)

<p>通过前面的学习,我们现在已经可以在<a href="/Html5/">HTML5</a> canvas中绘制图形和文字,并给它们设置一些样式。我们还可以在<code>&lt;canvas&gt;</code>中绘制图片。用于在<code>&lt;canvas...

HTML5 Canvas:像素处理

HTML5 Canvas:像素处理

厉飞雨 阅读(17) 评论(0) 赞(2)

<p>我们可以直接从<a href="/Html5/">HTML5</a> canvas中获取单个像素。通过<code>ImageData</code>对象我们可以以读写一个数据数组的方式来操纵像素数据。当完成像素操作之后,如果要显示它们,需要将这些像素复制到canvas上。</p> &...

HTML5 Canvas:获取canvas内容-toDataURL()

HTML5 Canvas:获取canvas内容-toDataURL()

厉飞雨 阅读(22) 评论(0) 赞(3)

<p>我们可以通过canvas的<code>toDataURL()</code>方法来获取绘制在HTML5 canvas中的内容。做法类似下面的示例代码:</p> <p><img src="http://static.51tbox.com/static/2024-11-23/col/a1c9f45081...

HTML5 Canvas:绘制文字

HTML5 Canvas:绘制文字

厉飞雨 阅读(20) 评论(0) 赞(4)

我们可以在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色。 绘制文字的字体由2D上下文的`font`属性来控制。如果你需要使用颜色来填充文字或制作描边文字,可以使用2D上下文的`fillStyle`和`strokeStyle`属性来完成。 ![61.png](http://static.51tbox.com/static/2024-11-23/c...

HTML5 Canvas:绘制矩形

HTML5 Canvas:绘制矩形

厉飞雨 阅读(25) 评论(0) 赞(3)

<p>不论你在HTML5 canvas上绘制什么图形,有两个属性是你必须设置的:</p> <p><img src="http://static.51tbox.com/static/2024-11-23/col/6ec848f786cf01cd1b4be5fdf9371197/d631469924d44582a62ad86c5a...

HTML5 Canvas:绘制路径

HTML5 Canvas:绘制路径

厉飞雨 阅读(27) 评论(0) 赞(3)

<p>一条<a href="/Html5/">HTML5</a> canvas路径是通过绘制指令来连接一系列的点,由这一系列的点构成直线或曲线。路径可以用于在HTML5 canvas上绘制各种类型的图形:直线、圆形、多边形等等。路径的绘制是canvas的核心,必须很好的理解和掌握。</p> <p>&...