Canvas学习笔记——拖曳与投掷物体

首先用一个例子来演示这个效果: 鼠标可以拖曳和投掷小球 // > 16 & 0xff, g = color >> 8 & 0xff, b = color >> 0xff, a = (alpha 1) ? 1 : alpha); if(a === 1) { return 'rgb('+r+','+g+','+b+')'; } else { return 'rgba('+r+','+g+','+b+','+a+')'; } }; window.utils.pa…

canvas学习笔记、小函数整理

http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 canvas 实现液体效果 2016-5-11 CANVAS学习笔记,小函数整理: <!doctype html> <html> <head> <meta charset="utf-8"> <title></title&…

canvas学习笔记，实用知识点总结（上）

本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 2.创建绘图对象 3.开始位置 (画一条线当lineWidth特别大的时候起始点从这条线的左下角开始的) 4.结束位置 5开始画图注意:canvas标签是不能在css中设置的,在标签上面设置width和height属性,值为不带px的数值; 栗子一:画一条直线 //1.画一条线 var c = d…

canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）

[下篇] -- 建议学习时间4小时课程共(上中下)三篇此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例,建议大家学习10~15个小时,里面的案例请挨个敲一遍,这样才能转化为自己的知识. 技术要求:有html/css/js基础. 保存状态 save()restore()save 和 restore 方法是用来保存和恢复 canvas 状态的,都没有参数.Canvas 的状态就是当前画面应用的所有样式和变…

canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理

[中篇] -- 建议学习时间4小时课程共(上中下)三篇此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例,建议大家学习10~15个小时,里面的案例请挨个敲一遍,这样才能转化为自己的知识. 技术要求:有html/css/js基础. 颜色为canvas添加颜色我们使用 fillStyle 和 strokeStyle,在上一篇中我们已经简单的使用过 fillStyle = color设置图形的填充颜色.st…

canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线

[上篇] -- 建议学习时间4小时课程共(上中下)三篇此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例,建议大家学习10~15个小时,里面的案例请挨个敲一遍,这样才能转化为自己的知识. 技术要求:有html/css/js基础. canvas标签 <canvas>是一个图形容器,让我们在网页中绘制图形,很多人把它称为画布,使用canvas绘制图形就相当于在画布上画画一样,我们可以绘制非常炫酷的页面效果…

canvas学习笔记一

为了研究pixi库,就顺带从头到位学习下canvas吧判断支持力度 var webgl = (function() { try { var canvas = document.createElement('canvas'); return !!window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')); } catch (e) { retur…

canvas学习笔记：canvas对图片的像素级处理--ImageData的应用

学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageData(width,height); // 用于创建ImageData对象 ctx.getImageData(x,y,width,height); // 用于从canvas中获取ImageData对象 ctx.putImageData(imagedata, x, y, dx, dy, width,…

canvas学习笔记（一）-认识canvas

canvas是html5新增的一个标签,主要用于图形的绘制.我们可以把它理解为是浏览器给我们提供了一个画板,至于要绘制怎样的画卷,就看神笔马良你的主意了.而在canvas上绘制图形使用的笔,就是js了. 使用canvas绘图大致分为如下几个步骤 1.创建一个canvas标签,指定id.width.height属性 [html] <canvas id=’firstCanvas’ width=’400′ height=’300′>不支持canvas标签</canvas> [/html]…

【canvas学习笔记一】基本认识

<canvas>标签定义了一块画布,画布可以在网页中绘制2D和3D图象,现在先学习如何绘制2D图象,绘制3D图象属于WebGL的内容(也就是网页版的OpenGL,3D图形接口). 属性 <canvas>只有width和height两个属性.如果没有设置width和height属性,canvas的默认初始大小是宽300px,高150px.如果通过CSS来设置canvas的宽高,而设置的宽高不是默认大小的比例,则canvas呈现的图象会失真变形.所以,建议用JavaScript来设置c…

【canvas学习笔记二】绘制图形

上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个单元是1像素.示意如下: 矩形 canvas可以绘制的多边形只有矩形,其他都要通过线段拼接而成. 绘制矩形有三个API: fillRect(x, y, width, height) 绘制一个填充的矩形. strokeRect(x, y, width, height) 绘制一个只有描边的矩形. cle…

WebGL three.js学习笔记阴影与实现物体的动画

实现物体的旋转.跳动以及场景阴影的开启与优化本程序将创建一个场景,并实现物体的动画效果运行的结果如图: 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Three.js</title> <script src="../../../Import/three.js"…

Canvas学习笔记——缓动

当你驾车在高速公路上行驶时,速度是很快的,而快到收费站时,则开始减速直到停下.将这个例子转换成物理模型就是当物体向终点运动时,开始速度会很快,而在快要到达终点时,速度会逐渐放缓直至0,整个运动过程就是缓动.距离越远,速度就越大,距离越近,速度就越慢,也就是距离和速度是成正比关系的. 如果t为1,则也就是速度等于距离乘以一个0到1的小数. v = (target - currentPosition) * k; // k(0,1] // > 16 & 0xff, g = color &g…

Canvas学习笔记——动画中摩擦力的运用

摩擦力是与物体运动方向相反的力.我们在处理物体运动时,常把物体分解水平(X轴)方向和竖直(Y轴)方向的运动(比如平抛运动),但在处理摩擦力时,如果把摩擦力分解为X轴和Y轴上的阻力,就会出现某条轴上速度为0,而另一条轴还在运动的奇怪现象.为此,处理摩擦力时应将物体最终运动的方向作为基准. 首先计算出合速度: var speed = Math.sqrt(vx * vx + vy * vy); 分析后可知夹角θ可通过Math.atan2算出: var angle = Math.atan2(vy,vx…

Canvas学习笔记——动画环境中的边界

在动画中经常要处理边界问题,比如一个物体运动到了边界,要怎么处理才合适呢?通常有几种以下几种方式: 让物体消失 // > 16 & 0xff, g = color >> 8 & 0xff, b = color >> 0xff, a = (alpha 1) ? 1 : alpha); if(a === 1) { return 'rgb('+r+','+g+','+b+')'; } else { return 'rgba('+r+','+g+','+b+','+a…

【canvas学习笔记四】绘制文字

本节我们来学习如何绘制文字. 绘制文字有两个主要的方法: fillText(text, x, y [, maxWidth]) 在x, y位置填充文字text,有一个可选参数maxWidth设置最大绘制宽度. strokeText(text, x, y [, maxWidth]) 在x, y位置给文字text描边,有一个可选参数maxWidth设置最大绘制宽度. 文字样式有一些属性用来设置文字的样式: font = value 设置字体.大小等,语法和CSS的font-famaliy属性语法一样…

【canvas学习笔记三】样式和颜色

上一节我们学习了如何用路径绘制各种形状,但我们只能用默认的颜色和线条.这节就来学习设置不同的颜色和线条样式. 颜色设置颜色主要有两个属性: fillStyle = color 设置填充颜色 strokeStyle = color 设置描边颜色颜色值可以用十六进制也可以用一些内置的颜色字符,还可以用rgb和rgba格式. 例子: // these all set the fillStyle to 'orange' ctx.fillStyle = 'orange'; ctx.fillStyle…

HTML5 canvas学习笔记（一）

canvas是HTML5中新增的标签,下面是各浏览器的支持程度: canvas的默认大小为:宽-300px,高-150px(注意:画布的大小作为canvas标签的行内样式设置,而且是没有“px”单位的哦, 如果你在canvas的css样式中给它设置大小,它只会当做放大比例来处理!),下面这段代码在支持canvas的浏览器中会显示一块400px400px的白色(默认颜色)画布,在不支持canvas的浏览器中只是显示canvas中的文字而已哦. <!doctype html> <html…

canvas学习笔记

html5的新标签:canvas; 作用:标签定义图形,比如图表和其他图像:标签只是图形容器,您必须使用脚本来绘制图形.默认大小:宽300px,高150px; 背景知识:概念最初由苹果公司提出的,用于在Mac os X webkit中创建控制板部件.在canvas出现之前,开发人员若要在浏览器中使用绘图API,只能使用Adobe的Flash和SVG插件或者只有IE才支持的VML(矢量标记语言) 强调一点:canvas元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图…

---JS canvas学习笔记

canvas学习笔记：小小滴公式，大大滴乐趣

声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近想弄一个网页,把自己学HTML5过程中做的部分DEMO放上去做集合,但是,如果就仅仅做个网页把所有DEMO一个一个排列又觉得太难看了.就想,既然学了canvas,那就来折腾下浏览器,做个小小的开场动画吧. 开场动画的效果,想了一会,决定用粒子,因为觉得粒子比较好玩.还记得以前我写的第一篇技术博文,就是讲文字图片粒子化的:文字图片粒子化 , 那时就仅仅做的是直线运动,顺便加了一点3D效果.运动公式很简单.所以就想这个开场动画就做的更…

Android Bitmap和Canvas学习笔记 [转]

原文:http://www.cnblogs.com/feisky/archive/2010/01/10/1643460.html 位图是我们开发中最常用的资源,毕竟一个漂亮的界面对用户是最有吸引力的. 1. 从资源中获取位图可以使用BitmapDrawable或者BitmapFactory来获取资源中的位图. 当然,首先需要获取资源: Resources res=getResources(); 使用BitmapDrawable获取位图使用BitmapDrawable (InputStream…

canvas学习笔记（一）

canvas是HTML5的新元素之一.使用canvas可以直接在HTML上进行图形操作,所以它具有极大的应用价值.canvas元素本身不具有绘图能力,它需要借助JavaScript来实现绘图功能. canvas的限制: canvas绘制的图形是静态的,如果要让所画的图形动起来,则需要画出每一帧的图形. 在使用canvas时,需要考虑用户的浏览器和使用环境. canvas目前只是一张二维画布,要想实现三维效果,需要借助第三方类库,如three.js或者Papervision3D等. 使用canva…

canvas学习笔记之2d画布基础的实现

一. Canvas是啥 < canvas > 是一个可以使用脚本(通常是js)来绘图的HTML元素 < canvas > 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard和 Safari 如今,所有主流的浏览器都支持它(IE9+,更低版本需引入Explorer Canvas来支持) 1. 开始画图(渲染上下文) < canvas > 元素创造了一个固定大小的画布,其上的渲染上下文CanvasRenderContext2D,可以用来绘制和处理…

canvas学习笔记1

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style="display: block;margin:20px auto;border:1px solid…

Android Bitmap和Canvas学习笔记

位图是我们开发中最常用的资源,毕竟一个漂亮的界面对用户是最有吸引力的. 1. 从资源中获取位图可以使用BitmapDrawable或者BitmapFactory来获取资源中的位图. 当然,首先需要获取资源: Resources res=getResources(); 使用BitmapDrawable获取位图使用BitmapDrawable (InputStream is)构造一个BitmapDrawable: 使用BitmapDrawable类的getBitmap()获取得到位图: // 读…

Canvas学习笔记——弹动

如果有一根橡皮筋拴住一个小球,将小球拉开一定距离后释放,小球将会弹动.距离越远,橡皮筋对小球施加的外力越大,小球的加速度就越大.也就是说,小球的加速度与距离是成正比例关系的.这和缓动很相似,缓动是速度与距离成正比例.假设弹力系数为spring,则有公式: ax = (targetX - currentX) * spring; ay = (targetY - currentY) * spring; vx += ax; vy += ay; 举个例子: // > 16 & 0xff, g =…

Canvas学习笔记——动画中的三角学

示例1,跟随鼠标的键头: 需要掌握一个重要的公式,这个方法返回从 x 轴到点 (x,y) 之间的角度 Math.atan2(dy,dx); 关键代码: function Arrow() { this.x = 0; this.y = 0; this.rotate = 0; this.color = '#ffff00'; } Arrow.prototype.draw = function(context) { context.save(); context.translate(this.x, t…

HTML <canvas> 学习笔记

Professional JavaScript for Web Developers P552 Basic Usage The <canvas> element requires at least its width and height attributes to be set in order to indicate the size of the drawing to be created. Any content appearing between the opening an…

【canvas学习笔记八】像素操作

ImageData对象 ImageData对象包含了一个区域内的canvas的像素信息.它包含以下可读属性: width canvas的宽度,单位是像素. height canvas的高度,单位是像素. data 一个Uint8ClampedArray的一维数组,包含了每个像素的RGBA值. 什么是Uint8ClampedArray?这个数组里的数值是8位的整型,而且值得范围在0和255之间.任何不在[0, 255]之间的数都会变成[0, 255]之间最接近的那个整型数. 0到255之间,那记录…

【Canvas学习笔记——拖曳与投掷物体】的更多相关文章