指定颜色 黑色是Canvas绘制的默认色彩，要想换一种颜色的话，就得在实际画之前指定颜色。JavaScript Code复制内容到剪贴板ctx.strokeStyle = color 指定绘制线的颜色：JavaScript Code复制内容到剪贴板ctx.fillStyle = color 指定填充的颜色：来看看实际的例子： JavaScriptJavaScript Code复制内容到剪贴板onload = function() { draw(); }; function draw() { var canvas = document.getElementById('c1'); ...
URL 编码URL 编码就是将 URLs 中不宜打印的字符或者具有特殊意义的字符转换为 Web 浏览器和服务器明白且普遍接受的表示法。 这些字符包括： ASCII 控制字符 - 不宜打印的字符通常用于输出控制。字符范围是十六进制的 00-1F（十进制的 0-31）和 7F（十进制的 127）。下面提供了完整的编码表。 非 ASCII 控制字符 - 这些字符超出了 128 个 ASCII 字符集的范围。这个范围是 ISO-拉丁字符集的一部分以及包含整个十六进制的 ISO-拉丁字符...
在介绍矩阵变换transform()前，我们来说一说什么是变换矩阵。 以上是Canvas中transform()方法所对应的变换矩阵。而此方法正是传入图中所示的六个参数，具体为context.transform(a,b,c,d,e,f)。 各参数意义对应如下表： 参数意义a水平缩放（1）b水平倾斜（0）c垂直倾斜（0）d垂直缩放（1）e水平位移（0）f垂直位移（0） 当我们把对应的0或1代入进矩阵，可以发现这是一个单位矩阵（水平和垂直缩放默认值是1，代表缩放1倍，即不缩放）...
这是一款基于HTML5的3D水波动画特效，它的效果非常逼真，我们可以按“G”键来让水池中的石头上下浮动，按“L”键添加灯光效果，设计相当完美。同时说明一下，这款3D水波动画是基于WebGL渲染技术的，大家可以了解一下WebGL。在线预览 源码下载 HTML代码XML/HTML Code复制内容到剪贴板img id="tiles" src="tiles.jpg"> img id="xneg" src="xneg.jpg"> img id="xpos" src="xpos.jpg"> img id="ypos" src="y...
HTML5新特新 HTML5 中的一些有趣的新特性： 1、用于绘画的 canvas 元素 2、用于媒介回放的 video 和 audio 元素 3、对本地离线存储的更好的支持 4、新的特殊内容元素，比如 article、footer、header、nav、section 5、新的表单控件，比如 calendar、date、time、email、url、search SVG绘制图片效果图: 代码如下:代码如下: * { padding: ; margin: ; } body { background-color: #ddd; } .container { width: px; height: px; posi...
今天和大家分享一个以SVG图像为主的loading加载动画，现在移动端网页使用比较多，若还用GIF做loading图片的话，可能会影响图像的质量，所以使用SVG是一个不错的方式。 这次展示的代码由 Aurer 编写，前端人员只需要直接复制想要的SVG代码就能直接使用，而且可以改变颜色。当然，对于好学的同学，也可以研究下这个代码的编写原理。 使用教程 接下来设计达人网小编为大家讲解这个使用方法，其实是相当简单的。 STEP 1: 复制你想要的S...
HTML5 特性，包括原生音频和视频支持而无需 Flash。 HTML5 和 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源，包含 controls 属性让用户可以播放和暂停媒体。 嵌入视频下面是在 Web 页面中嵌入视频文件最简单的形式：XML/HTML Code复制内容到剪贴板video src="foo.mp4" width="300" height="200" controls> Your browser does not support the video> element. video> 目前的 HTML5 规范...
作为web开发者，我一直在和HTML5 canvas元素打交道。渲染图片是一个大的分支，十分重要而且很常用，所以,今天的教程是关于画布图像展示以及如何旋转图像，说不定是你现在真正想要的好东西。 总的来说，canvas旋转有两种方式：中心旋转和参照点旋转。熟练应用旋转功能，对你的开发作品会有极大的帮助。 关于对象的中心旋转第一个类型的旋转，我们要看看是对其中心旋转一个对象。实现使用画布元素，这是一个最简单的旋转类型。我们把...
最近在移动端设计头像上传功能时，原本是以直接通过formData上传，然而实际使用情况是：对于过大的图片（高像素手机所拍摄的照片等）上传时间过长会导致上传失败，而每次都上传原始大小的图片（后台处理压缩）十分影响用户体验，所以研究了一下通过canvas压缩图片并上传的方法，以下是整理的一些思路和心得： 一、获取本地图片，并将图片绘制到画布中。此处的难点在于：由于浏览器的保护机制，无法直接获取到本地文件的图片路径，所...
HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML [1]（标准通用标记语言下的一个应用）标准版本；现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。 1. 新的文档类型声明HTML4规定的三种文档类型声明：XML/HTML Code复制内容到剪贴板> > > XHTML 1.0 规定的三种文档类型声明:XML/HTML Code复制内容到剪贴板> > > XHTML 1.1文档严格定义类型，等同于XHTML1.0文档过渡定义类型XML/HTML Code复...
怎么画线条？和现实中画画差不多：1.移动画笔，使画笔移动至绘画的开始处2.确定第一笔的停止点3.规划好之后，选择画笔（包括画笔的粗细和颜色等）4.确定绘制 因为Canvas是基于状态的绘制（很重要，后面会解释），所以前面几步都是在确定状态，最后一步才会具体绘制。1.移动画笔(moveTo())之前我们获得了画笔context，所以以此为例，给出改方法的使用实例——context.moveTo(100,100)。这句代码的意思是移动画笔至(100,100)这个点（...
HTML5 究竟什么是HTML5？在W3C HTML5的常见问题中，关于HTML5是这样说明的：HTML5是一个开放的平台下开发的免费许可条款。具体来说，对这句话有以下两种理解：“指一组共同构成了未来开放式网络平台的技术。这些技术包括HTML5规范、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字体以及其他技术。这一套技术的边界是非正式的，且随时间变化的。指HTML5规范，当然也是开放式网络平台的一部分。 ”Canvas的浏览器支...
触摸事件是移动浏览器特有的HTML5事件，虽然click事件在pc和移动端更通用，但是在移动端会出现300ms延迟，较为影响用户体验，300ms延迟来自判断双击和长按，因为只有默认等待时间结束以确定没有后续动作发生时，才会触发click事件。所以触摸事件反应更快，体验更好。触摸事件的类型： 为了区别触摸相关的状态改变，存在多种类型的触摸事件。可以通过检查触摸事件的 TouchEvent.type 属性来确定当前事件属于哪种类型。 注意: 在很多...
填充颜色 艺术离不开色彩，今天咱们来介绍一下填充颜色，体会一下色彩的魅力。填充颜色主要分为两种： 1.基本颜色2.渐变颜色（又分为线性渐变与径向渐变） 我们一个个来看。 填充基本颜色Canvas fillStyle属性用来设置画布上形状的基本颜色和填充。fillStyle使用简单的颜色名称。这看起来非常简单，例如:JavaScript Code复制内容到剪贴板context.fillStyle = "red"; 下面是出自 HTML4 规范的可用颜色字符串值列表，共十六个。由于...
本文为大家带来了一款，免费而又安全环保的HTML5 Canvas实现的放烟花特效。 效果如下：代码如下：XML/HTML Code复制内容到剪贴板> html> head> title>Canvas 实现放烟花特效title> meta charset="utf-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no"> style t...