博客首页 → canvas

最新文章列表

用HTML5 Canvas做一个画图板

  使用HTML5可以非常简单地在canvas上实现画图应用，用支持html5的浏览器便可在下面的区域进行绘画，要看到演示效果，请确保你的浏览器支持HTML5： 点击演示效果 功能很简单，原理其实和拖放是类似的，主要是三个事件： 在canvas 上绑定mousedown 事件以标志绘画的开始（调用moveTo 移动画笔） 在document 上绑定mousemove 事件来处理绘画时的行 ...
canvasjavascripthtml5 
xjk2131650 评论(0) 有1058人浏览 2012-03-26 17:41

关于JS页面动态绘图SVG，Canvas，VML介绍

说到绘图、报表之类的技术，大家首先想到的就是Flex，当然也有许多了解javaapplet，对于这两种技术来说，各有利弊。首先Flex很笨重，但是其效果实在让人喜欢。对于javaapplet来说，至少我在网络上很少看到，当然对于我们做开发的来说在我们的开发工具或者内部网络上还是有一些的。 其实现在Web上进行绘图的话还是有很多选择的，你可以到谷歌上搜索JS绘图，会有很多绘图工具提供给你使用，而且 ...
js动态绘图xmlsvgCanvasexcanvas 
cuisuqiang 评论(5) 有23780人浏览 2012-03-23 11:00

Canvas做游戏实践分享(十一)

7    缓冲和弹跳       下面我们来介绍一下很常用的缓冲和弹跳的处理。在我们实现复杂运动时，这两种技术会处理大多种的情况。缓冲与弹跳非常均是用来处理将一个对象从已知起点移动到给定终点的技术——缓冲是指对象滑动到目标位置并停止，而弹跳是指对象做有摩擦力的弹簧振子运动。它们有一些共同点： 已知初始位置与目标位置 运动参数与距离成正相关 具体原理是缓冲的速度大小与距离成正相关，而弹 ...
HTML5Canvas动画easinggame 
blessdyb 评论(0) 有2417人浏览 2012-03-19 14:59

html5 canvas如何以某个中心点旋转图片

var num=0; function draw() { num+=1; if(num==60) num=1; cxt.clearRect(0,0,canvas.width,canvas.height); cxt.save(); //将坐标原点平移到当前图片所在的位置,width,height分别为图片的坐标,这个可以根据自己的需要进行更改    cxt.translate(width ...
canvas 
murener 评论(0) 有6632人浏览 2012-03-19 14:14

Canvas学习笔记(八)--样式

1、设置颜色   fillStyle = color; //设置填充颜色 strokeStyle = color; //设置边框颜色   color可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。默认为黑色（#000000）。     // 这些 fillStyle 的值均为 '红色' ctx.fillStyle = "red"; c ...
web前端html5canvas 
lib 评论(0) 有1561人浏览 2012-03-13 11:34

Canvas学习笔记(七)--应用图像

1、图像简介   此功能可以用于图片合成或者制作背景等。目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）、加入图片（如 PNG，GIF，JPEG等）、加入其他的canvas元素。   2、引入图像的步骤   1）获取JavaScript的Image对象或者其它的canvas元素。但不能是简单的image路径或url；   2）使用drawImage()函数绘制图形 ...
web前端html5canvas 
lib 评论(0) 有2126人浏览 2012-03-12 14:28

Canvas学习笔记(六)--绘图（综合使用）

首先看看需要完成的图像：   代码如下：   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" ...
web前端html5canvas 
lib 评论(0) 有1541人浏览 2012-03-10 09:21

Canvas学习笔记(五)--绘图（贝赛尔曲线）

1、二次贝塞尔曲线介绍   quadraticCurveTo(cpx,cpy,x,y)   cpx，cpy表示控制点的坐标；   x，y表示终点坐标；   数学公式表示如下：   二次方贝兹曲 ...
web前端html5canvas 
lib 评论(2) 有15771人浏览 2012-03-09 16:52

Canvas学习笔记(四)--绘图（路径【弧线】）

1、绘制弧线的方法   arc(x, y, radius, startAngle, endAngle, anticlockwise)   x，y：圆心的坐标； radius：圆心的半径； startAngle：起始弧度（以横轴X为标准）； endAngle：终止弧度（以横轴X为标准）； anticlockwise： true表示逆时针，false表示顺时针；   注：a ...
web前端html5canvas 
lib 评论(2) 有1718人浏览 2012-03-09 11:28

Canvas学习笔记(三)--绘图（路径【直线】）

1、绘制路径的方法   beginPath()：开始一个新路径。   closePath()：关闭路径。   stroke()：绘制路径边框。   fill()：使用颜色填充路径绘制的图形。   moveTo(x,y)：设置坐标的位置。   lineTo(x,y)：绘制一条直线。参数(x,y)是终点的坐标，起点坐标取决于前一路径（即：前一路径的终点就是当前路径的起 ...
web前端html5canvas 
lib 评论(0) 有1648人浏览 2012-03-09 10:38

Canvas学习笔记(二)--绘图（矩形）

1、canvas网格坐标  左上角为坐标原点(0,0)，横轴X向右坐标值增大，纵轴Y向下坐标值增大。坐标系中所有物体的位置都相对于这个原点。如图所示，蓝色方块的位置距左边x像素，距上面y像素，坐标为(x,y)。   2、绘制矩形   fillRect(x,y,width,height)：绘制填充颜色的矩形；   strokeRect(x,y,width,height)：绘制带有边框的矩 ...
web前端html5canvas 
lib 评论(0) 有1559人浏览 2012-03-09 10:18

Canvas学习笔记(一)--基础知识

  1、<canvas>元素   id：不是<canvas>元素专享，和标准的html标签一样，都可以为元素指定id； width：元素宽度，默认为300px。可以通过dom和css进行设置； height：元素高度，默认为150px。可以通过dom和css进行设置； 注：使用css设置width和height时，渲染图像会缩放适应布局，这意味着图像发生了变形，这 ...
web前端html5canvas 
lib 评论(0) 有1441人浏览 2012-03-09 09:36

Canvas学习系列之rotate()

坐标空间和转换下的api     rotate()方法旋转画布的坐标系统。     /* @param angle -旋转的量，弧度表示。正值表示顺时针，反之 */ rotate(angle)   注释：旋转的是后续绘图在画布中的显示效果。它并没有旋转<canvas>元素本身。
rotatecanvas 
zhangyaochun 评论(0) 有1483人浏览 2012-03-08 10:51

Canvas学习系列之DOM Canvas

HTML DOM Canvas 对象          -----表示一个HTML画布元素- <canvas>。     Canvas对象的属性 height属性 ---画布的高度，默认值是300，可以知道一个整数像素值或者窗口高度的百分比      2.  width属性  ---画布的宽度，默认值是300，可以知道一个整数像素值或者窗口宽度的百分比 ...
Canvas 
zhangyaochun 评论(0) 有1501人浏览 2012-03-07 13:28

Canvas学习系列之<canvas>标签

HTML 5 <canvas> 标签 定义图形，比如图表和其他图像 只是图像容器，需要配合脚本来绘制图形 1、属性： height：设置canvas的高度 width：设置canvas的宽度 2、历史：   由Safari1.3 Web浏览器引入。FF1.5和Opera 9紧跟着。后来<canvas>成为了HTML5的 ...
canvas 
zhangyaochun 评论(0) 有1654人浏览 2012-03-07 13:13

Canvas学习系列之入门

HTML 5 Canvas         ------------用于在网页绘制图形。   1、什么是Canvas?    题外话：从翻译角度来讲是帆布、油布    配合脚本在网页上绘制图像 画布是一个矩形区域，您可以控制其每一像素 有多种绘制路径、矩形、圆形、字符以及添加图像的方法 2、创建Canvas元素 <canvas id=" ...
canvashtml5 
zhangyaochun 评论(0) 有1457人浏览 2012-03-07 12:55

关于Canvas 保存的图片的面积与存储大小关系

        最最近在做android图像处理工具，用主要用Canvas来进行各种操作，当保存到手机存储卡中后，仔细分析图片的存储大小，发现图片的存储大小只和图片的面积成线性关系（前提是处理同一图片） 即： 设要保存的一种大小的图片的面积为S1,存储大小为storage1,要保存的另一种一种大小的图片的面积为S2,存储大小为storage1,则有：                S1 ...
Canvas 
wangchangshuai0010 评论(0) 有1518人浏览 2012-03-06 21:34

android 关于canvas 保存到本地图像

我刚开始使用Canvas的时候总以为Canvas，只要一创建就能往上面涂鸦或者显示其他的图片，但后来发现不是这么回事，如下我创建一个Canvas: Bitmap bitmap_ ...
Canvas 
wangchangshuai0010 评论(0) 有5272人浏览 2012-03-05 17:30

canvas font组件

为了响应淘宝KISS理念，为中国开源做小点贡献，故有此文。 主要内容就是实现canvas显示文字，并做好这件简单的事。 策划总是会提出各种需求，如果是dom结构，直接用css样式就可以实现，现在canvas怎么办呢？本文以此为切入点，实现了常规dom里面的样式接口。现列出如下： top, left width， height // 自适应并换行 text-align text-indent ...
HTML5canvasfontmetricsmeasureText 
danny.chiu 评论(0) 有2393人浏览 2012-02-29 14:13

jQuery 脸部辨识

jQuery 脸部辨识 jQuery的插件在照片上标识脸部并给出他们的坐标和大小。这个插件是由六六(音译：Liuliu)结合HTML5 canvas开发的，所以只能在支持HTML5的客户端跑。有兴趣的话可以参见这个http://facedetection.jaysalvat.com/（见下图，不过要翻——墙），整套算法代码可以在 git hubhttps://github.com/jaysalva ...
html5 canvas面部人脸识别jqueryfacedetectioncanvas 
shenlm203 评论(0) 有1562人浏览 2012-02-29 14:00

最近博客热门TAG

Java(141741) C(73643) C++(68602) SQL(64557) C#(59604) XML(59131) HTML(59042) JavaScript(54916) .net(54782) Web(54511) 工作(54116) Linux(50906) Oracle(49861) 应用服务器(43285) Spring(40811) 编程(39452) Windows(39380) JSP(37540) MySQL(37266) 数据结构(36420)

博客人气排行榜

    博客电子书下载排行

      >>浏览更多下载

      相关资讯

      相关讨论

      Global site tag (gtag.js) - Google Analytics