canvas引擎-好得很程序员自学网

canvas画布在主流浏览器中的尺寸限制

canvas画布在主流浏览器中的尺寸限制:canvas画布在主流浏览器中的尺寸限制通过测试发现，canvas在不同浏览器下面有不同的最大尺寸限制。大家都知道，canvas有自身的width,height属性来控制尺寸，用css的width,height,控制显示的大小。可以理解为c...

阅读:67次

【HTML5】Canvas实现放大镜效果

【HTML5】Canvas实现放大镜效果:目录图片放大镜效果在线演示源码原理首先选择图片的一块区域，然后将这块区域放大，然后再绘制到原先的图片上，保证两块区域的中心点一致, 如下图所示:初始化获得 canvas 和 image 对象，这里使用标签预加载图片, 关于图片预...

阅读:62次

html5--canvas

html5--canvas:绘制普通直线,先看效果图:实现代码如下: 绘制贝塞尔曲线效果图如下：代码如下：关于了解的html5的基本知识点就到这里了，毕竟项目中没有去使用，出于个人闲来无事有个大体了解.并且都很基本，其实...

阅读:71次

canvas实现刮刮乐

canvas实现刮刮乐:canvas实现刮刮乐主要是要注意两个地方:第一个是将绘制的图形设置成背景图片（用到toDataURL属性），这样在擦覆盖层的时候才不会丢失绘制的图案，第二个是设置在绘制插图的时候，设置透明透明（用到globalCompositeOpera...

阅读:62次

HTML5的canvas绘制动态时钟，1秒刷新一次canvas,个人觉得有性能的问题，如果不这么做的

HTML5的canvas绘制动态时钟，1秒刷新一次canvas,个人觉得有性能的问题，如果不这么做的话，有什么好的方法？:回复内容：个人觉得没有性能的问题不会有任何性能问题，要理解canvas是比较底层的API，它需要手工去做一些底层的工作，让canvas里的东西动起来就需要不停的重绘，刚接触canvas的人会容易产生这样的误解，觉得这样会有性能问题传统的DO...

阅读:77次

html5：canvas

html5：canvas:1.什么是canvas?可以绘制图形的标签。一般用javascript来绘制。2.创建一个画布 //创建画布用canvas标签3.在画布上绘图。4.canvas-路径var can=document.getElementBy...

阅读:60次

Canvas——使用定时器模拟动态加载动画！

Canvas——使用定时器模拟动态加载动画！:你的浏览器不支持canvas技术...

阅读:67次

HTML5中canvas的使用总结

HTML5中canvas的使用总结:1.概述Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。使用前，首先需要新建一个网页元素。canvas id="myCanvas...

阅读:65次

基于HTML5Canvas实现矢量工控风机叶轮旋转

基于HTML5Canvas实现矢量工控风机叶轮旋转:之前在拓扑上的应用都是些静态的图元，今天我们将在拓扑上设计一个会动的图元——叶轮旋转。先看看最后我们实现的效果：http://www.hightopo.com/demo/fan/index.html我们先来看下这个叶轮模型长什么样从模型上看...

阅读:60次

HTML5中的Canvas元素

HTML5中的Canvas元素:canvas 元素用于在网页上绘制图形。什么是Canvas？HTML 5 的canvas元素使用JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的...

阅读:66次

HTML5canvas9绘制图片实例详解

HTML5canvas9绘制图片实例详解:绘制图片Var image=new Image();image.src=” http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau.thumb.700_0.jp...

阅读:67次

Tkinter教程之Canvas篇(2)

Tkinter教程之Canvas篇(2):Tkinter教程之Canvas篇(2)9.创建item的tags# -*- coding: cp936 -*-# 使用属性tags设置item的tag# 使用Canvas的方法gettags获取指定item的tagsfrom Tkinte...

阅读:66次

基于canvas的纯JS二维码生成插件

基于canvas的纯JS二维码生成插件:简要教程qrious是一款基于HTML5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码，你可以控制二维码的尺寸颜色，还可以将生成的二维码进行Base64编码。安装可以通过bower或npm来安装qrio...

阅读:71次

支持移动端的HTML5Canvas逼真黑板特效

支持移动端的HTML5Canvas逼真黑板特效:简要教程这是一款使用HTML5 Canvas制作的黑板特效，该黑板特效支持手机移动端，它能模拟使用粉笔在黑板上写字的效果。该黑板特效的特点还有：使用鼠标左键能够在黑板上写字。使用鼠标右键能够擦除已写的字。按空格键可以清空黑板上的内容。点击下...

阅读:77次

Tkinter教程之Canvas篇(3)

Tkinter教程之Canvas篇(3):Tkinter教程之Canvas篇(3)16.移动item# -*- coding: cp936 -*-# move指定x,y在偏移量from Tkinter import *root = Tk()# 创建一个Canvas，设置其背景色为白...

阅读:76次

canvas游戏开发学习之七：变形

canvas游戏开发学习之七：变形:状态的保存和恢复 Saving and restoring state在了解变形之前，我先介绍一下两个在你开始绘制复杂图形就必不可少的方法。save()restore()和restore方法是用来保存和恢复 canvas 状态的，都没有参数...

阅读:75次

Tkinter教程之Canvas篇(4)

Tkinter教程之Canvas篇(4):Tkinter教程之Canvas篇(4)22.绘制弧形# -*- coding: cp936 -*-# 创建一个ARCfrom Tkinter import *root = Tk()# 创建一个Canvas，设置其背景色为白色cv = Ca...

阅读:54次

canvas游戏开发学习之八：基本动画

canvas游戏开发学习之八：基本动画:由于我们是用脚本去操控 canvas 对象，这样要实现一些交互动画也是相当容易的。只不过，canvas 从来都不是专门为动画而设计的（不像 Flash），难免会有些限制。可能最大的限制就是图像一旦绘制出来，它就是一直保持那样了。如果需要移动...

阅读:66次

canvas游戏开发学习之五：运用样式与颜色（一）

canvas游戏开发学习之五：运用样式与颜色（一）:到目前为止，我们只看到过绘制内容的方法。如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle和strokeStyle。fillStyle = colorstrokeStyle = colortrokeStyle是用于设置图形...

阅读:59次

canvas游戏开发学习之八：组合

canvas游戏开发学习之八：组合:之前的例子里面，我们总是将一个图形画在另一个之上，大多数情况下，这样是不够的。比如说，它这样受制于图形的绘制顺序。不过，我们可以利用globalCompositeOperation之前的例子里面，我们总是将一个图形画在另一个之上，大多数情况...

阅读:65次

canvas游戏开发学习之六：运用样式与颜色（二）

canvas游戏开发学习之六：运用样式与颜色（二）:线型 Line styles可以通过一系列属性来设置线的样式。lineWidth = valuelineCap = typelineJoin = typemiterLimit = value我会详细介绍这些属性，不过通过以下的样例可能会更加...

阅读:59次

canvas游戏开发学习之四：应用图像

canvas游戏开发学习之四：应用图像:Canvas 相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）。只要是Gecko支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas...

阅读:63次

基于HTML5Canvas和Rebound动画的Loading加载动画特效

基于HTML5Canvas和Rebound动画的Loading加载动画特效:简要教程这是一款基于HTML5 canvas和Rebound动画的Loading加载动画特效。该loading动画使用canvas来覆盖整个页面，并显示多边形的loading加载器来表示加载进度。1、创建一个SpringSystem。//...

阅读:65次

canvas游戏开发学习之三：绘制复杂形状

canvas游戏开发学习之三：绘制复杂形状:贝塞尔和二次方曲线Bezier and quadratic curves接下来要介绍的路径是贝塞尔曲线，它可以是二次和三次方的形式，一般用于绘制复杂而有规律的形状。quadraticCurveTo(cp1x, cp1y, x, y) //...

阅读:75次

canvas游戏开发学习之二：绘制基本图形

canvas游戏开发学习之二：绘制基本图形:网格 the grid在真正开始之前，我们需要先探讨 canvas 的网格（grid）或者坐标空间（coordinate space）。在前一页的 HTML模板里有一个150像素宽， 150像素高的 canvas 对象。我在画面上叠加上默认...

阅读:68次

canvas游戏开发学习之一：初识<canvas>标签

canvas游戏开发学习之一：初识<canvas>标签:让我们从元素的定义开始吧。看起来很像，唯一不同就是它不含src和alt属性。它只有两个...

阅读:66次

CanvasandDrawables翻译第三集

CanvasandDrawables翻译第三集:Android官方原文地址：http://developer.android.com/guide/topics/graphics/2d-graphics.html------以下的翻译融入了自己的思考，便于理解，很多地方翻译并不是很恰当，所...

阅读:57次

CanvasandDrawables翻译第一集

CanvasandDrawables翻译第一集:Android官方原文地址：http://developer.android.com/guide/topics/graphics/2d-graphics.html------以下的翻译融入了自己的思考，便于理解，很多地方翻译并不是很恰当，所...

阅读:56次

HTML5:使用Canvas实时处理Video

HTML5:使用Canvas实时处理Video:文档内容本文使用的XHTML文档如下所示。!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtm...

阅读:73次

小强的HTML5移动开发之路（6）——Canvas图形绘制基础

小强的HTML5移动开发之路（6）——Canvas图形绘制基础:在前面提到Canvas是HTML5中一个重要特点，canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现，下面我们用canvas实现基本图形的绘制。一、Canvas标签的使用...

阅读:58次

HTML5之5__Canvas:渐变

HTML5之5__Canvas:渐变:渐变 Gradient 是一种绘图方式，它应用于颜色上,使用渐变需要三个步骤:1. 创建渐变对象2. 为渐变对象设置颜色，即使用 addColorStop()函数，指明过渡方式, addColorStop 函数允许指定两个参数:...

阅读:66次

HTML5之9__Canvas的ShadowAPI

HTML5之9__Canvas的ShadowAPI:本文介绍 Canvas Shadow API ，为文本添加模糊阴影效果. 虽然之前已对 canvas 阴影效果应用有介绍 , 这里主要介绍对文本的阴影效果.阴影效果的使用也要把握好 "度". 看一个示例!DOCTYPE html...

阅读:71次

HTML5之10__使用CanvasAPI创建热点图

HTML5之10__使用CanvasAPI创建热点图:使用Canvas API 可以创建许多应用：图形、图表、图片编辑, 其中最奇妙的一个应用是修改或覆盖已有内容。最流行的覆盖图被称为热点图。热点图可以用在城市地图上来标记交通路况，或者显示风暴的活动情况。在地图上只需要将canva...

阅读:73次

HTML5之6__Canvas:插入图片,图片加载完时执行回调

HTML5之6__Canvas:插入图片,图片加载完时执行回调:使用canvas API 内置的几个简单命令可以轻松地为canvas 添加图片内容,应当注意: 必须等到图片完全加载后才能对其进行操作，浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas...

阅读:62次

HTML5之7__Canvas:缩放、旋转、创建阴影

HTML5之7__Canvas:缩放、旋转、创建阴影:一. canvas API 的scale() 函数用于缩放. scale() 带有两个参数，分别代表在x, y 两个维度的值，每个参数在 canvas 显示图像的时候，向其传递在本方向轴上图像要放大(或缩小) 的量，如果x为2,...

阅读:74次

HTML5之8__Canvas文本

HTML5之8__Canvas文本:canvas API 具有强大的文本功能，操作canvas 文本与操作其他路径对象的方式相同：可以描绘文本轮郭，填充文本内部。context 对象的文本绘制由两个函数实现:fillText(text, x, y, maxwidt...

阅读:74次

HTML5canvas基本绘图之绘制五角星

HTML5canvas基本绘图之绘制五角星:是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对...

阅读:79次

用HTML5的canvas实现一个炫酷时钟效果

用HTML5的canvas实现一个炫酷时钟效果:对于H5来说，canvas可以说是它最有特色的一个地方了，有了它之后我们可以随意的在网页上画各种各样的图形，做一些小游戏啊什么的。canvas这个标签的用法，在网上也有特别多的教程了，这里就不作介绍了。今天我们就用canvas来做一个小小的...

阅读:76次

HTML5Canvas玩转酷炫大波浪进度图效果实例（附demo）

HTML5Canvas玩转酷炫大波浪进度图效果实例（附demo）:本文介绍了HTML5 Canvas玩转酷炫大波浪进度图效果，具体如下：如上图所见，本文就是要实现上面那种效果。由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。首先要封装一下大波浪图片进度组件。基本...

阅读:75次

详解html5canvas常用api总结(二)--绘图API

详解html5canvas常用api总结(二)--绘图API:canvas可以绘制出很多奇妙的样式和美丽的效果，通过几个简单的api就可以在画布上呈现出千变万化的效果，还可以制作网页游戏，接下来就总结一下和绘图有关的API。绘画的时候canvas相当于画布，而context相当于画笔。1.绘制线条mo...

阅读:71次

HTML5canvas基本绘图之填充样式实现

HTML5canvas基本绘图之填充样式实现:是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对...

阅读:66次

canvas与html5实现视频截图功能示例

canvas与html5实现视频截图功能示例:这段时间一直在研究canvas，突发奇想想做一个可以截屏视频的功能，然后把图片拉去做表情包，哈哈哈哈哈哈~~制作方法：1.在页面中加载视频在使用canvas制作这个截图功能时，首先必须保证页面上已经加载完成了这个视频，这样才能够方便的对其操...

阅读:59次

canvasAPI，通俗的canvas基础知识（四）

canvasAPI，通俗的canvas基础知识（四）:今天要讲的内容是canvas的转换功能，前面的内容没用看的同学可以出门右转，先看看前面的基础知识，废话不多说，开始进入正题吧！何为转换功能？熟悉css3的同学都知道，css3里面有transform，translate，scale，rota...

阅读:62次

HTML5canvas基本绘图之图形变换

HTML5canvas基本绘图之图形变换:是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对...

阅读:64次

HTML5canvas基本绘图之绘制曲线

HTML5canvas基本绘图之绘制曲线:是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对...

阅读:61次

HTML5canvas基本绘图之文字渲染

HTML5canvas基本绘图之文字渲染:与文本渲染有关的主要有三个属性以及三个方法：上述的属性和方法的基本用法如下：var canvas = document.getElementById("canvas"); var context = canvas.get...

阅读:62次

HTML5canvas基本绘图之图形组合

HTML5canvas基本绘图之图形组合:只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在元素上绘图主要有三步： 1.获取元素对应的DOM对象，这是一个Canv...

阅读:70次

canvasAPI，通俗的canvas基础知识（五）

canvasAPI，通俗的canvas基础知识（五）:前几期讲的都是路径图形的绘图，这节我们要讲的是如何在画布上操作图片，因为图形画不了漂亮妹子（画图高手忽略不计），想画美女怎么办？跟我来:想要在画布中插入一张图片，我们需要的方法是这位大侠：drawImage() 在画布上绘制图像，画布或视...

阅读:54次

canvasAPI，通俗的canvas基础知识（三）

canvasAPI，通俗的canvas基础知识（三）:全文说到了三角形，圆形等相关图形的画法，不熟悉的同学可以出门右转，先看看前文，接下来继续我们的图形——曲线。学过数学，或者是比较了解js 的同学都知道贝塞尔曲线，当然，在数学里面，这是一门高深的学问，js里面的贝塞尔曲线一般是用来做动画的，...

阅读:67次

canvasAPI，通俗的canvas基础知识（二）

canvasAPI，通俗的canvas基础知识（二）:上文我们讲到了画一条线，画矩形，写文字，总算是有了一个好的开头，如果还没有看的同学出门左转，先看看那篇，这里就不多做叙述了，接下来我们看比较复杂的一些属性和方法！讲之前呢，我还是想温习一下，毕竟上文还有几个属性没有讲到，那我们从画三角形开始...

阅读:60次

canvas引擎最新更新教程及学习资料