-
实例讲解使用HTML5 Canvas绘制阴影效果的方法
创建阴影效果需要操作以下4个属性： 1.context.shadowColor：阴影颜色。 2.context.shadowOffsetX：阴影x轴位移。正值向右，负值向左。 3.context.shadowOffsetY：阴影y轴位移。正值向下，负值向上。...
-
借助HTML5 Canvas API制作一个简单的猜字游戏
二话不说，先上效果图以及源代码~ HTML代码 XML/HTML Code 复制内容到剪贴板 !doctypehtml html lang = en head meta charset = utf-8 / script type = text/javascript src = chp1_guess_the_letter.js / script script type = tex...
-
使用HTML5 Canvas API控制字体的显示与渲染的方法
API简介 今天我们开始征战一个全新的内容HTML5 Canvas的文本API！要知道，艺术家通常同时也是一个书法家，所以我们要学习写字，而且是写出漂亮的字。是不是很有意思？ 好了，先预告...
-
深入解析HTML5 Canvas控制图形矩阵变换的方法
在介绍矩阵变换transform()前，我们来说一说什么是变换矩阵。 以上是Canvas中transform()方法所对应的变换矩阵。而此方法正是传入图中所示的六个参数，具体为context.transform(a,b,c,d,e,f)。 各...
-
详解如何用HTML5 Canvas API控制图片的缩放变换
缩放变换scale(sx,sy)传入两个参数，分别是水平方向和垂直方向上对象的缩放倍数。例如context.scale(2,2)就是对图像放大两倍。其实，看上去简单，实际用起来还是有一些问题的。我们来看...
-
实例讲解利用HTML5 Canvas API操作图形旋转的方法
作为web开发者，我一直在和HTML5 canvas元素打交道。渲染图片是一个大的分支，十分重要而且很常用，所以,今天的教程是关于画布图像展示以及如何旋转图像，说不定是你现在真正想要的...
-
详解通过HTML5 Canvas实现图片的平移及旋转变化的
平移变换translate() 平移变换，故名思议，就是一般的图形位移。比如这里我想将位于（100，100）的矩形平移至（200，200）点。那么我只要在绘制矩形之前加上context.translate(100,100)即可。...
-
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举
圆角矩形是由四段线条和四个1/4圆弧组成，拆解如下。 因为我们要写的是函数而不是一个固定的圆角矩形，所以这里列出的是函数需要的参数。分析好之后，直接敲出代码。 JavaScript...
-
使用HTML5 Canvas API绘制弧线的教程
绘制标准圆弧 在开始之前，我们优化一下我们的作图环境。灵感来自于上节课的纹理，如果不喜欢这个背景，我在images目录下还提供了其他的背景图，供大家选择。另外把所有的样式表...
-
深入解析HTML5使用SVG图像时的viewBox属性用法
快速了解viewBox的参数 viewBox属性是用于指定用户SVG图像的坐标系统的原点以及尺寸的。所有在SVG内绘制的内容都是相对于这个坐标系统完成的。因为SVG画布在所有方向都是无限延长的，...
-
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程
HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边...
-
详解HTML5中download属性的应用
在传统的html中，某个文件的下载，是这样的： XML/HTML Code 复制内容到剪贴板 a href = =/files/abc1234564545.pdf report / a 而在HTML 5浏览器中，可以支持download属性了，如下： XML/HTML Code 复制内容...
-
详解HTML5中div和section以及article的区别
刚刚开始接触 HTML5 时，对它的标签很不适应，甚至一度有点反感。尤其是对 div、section、article 这几个标签，实在弄不清楚应该使用在什么场合下。 div HTML Spec: The div element has no special...
-
一些常用的HTML5模式(pattern) 总结
最近在做手机页面时，遇到数字输入的键盘的问题，之前的做法只是一刀切的使用 type=tel，不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了。于是想要尝试其它的实现方案，...
-
针对HTML5的Web Worker使用攻略
Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。 一：如何使用Worker Web Worker的基本原理就是在当前javascript的主...
-
极简的HTML5模版
分享一个HTML5页面开发的基础性模板，包含了两个版本：开发版本和注释版本。可以被用于基础的服务器端编程框架框架之中^_^ 开发版本 XML/HTML Code 复制内容到剪贴板 !DOCTYPEhtml html he...
