博客首页 → canvas

最新文章列表

Canvas入门实例07：二次方贝塞尔曲线

本文示例canvas二次方贝塞尔曲线的画法。   canvas画二次方贝塞尔曲线的方法如下： context.quadraticCurveTo(cpx, cpy, x, y) 其中，    cpx 控制点横坐标    cpy 控制点纵坐标    x 终止点横坐标    y 终止点纵坐标 这样说太抽象，还是来看一下二次方贝塞尔曲线的公式： 公式中可以看出，影响二次方贝塞尔曲线的 ...
Canvas 
BuN_Ny 评论(0) 有3298人浏览 2011-12-14 09:12

Canvas入门实例06：context.arcTo()的用法

该方法的使用方式如下： context.arcTo(x1, y1, x2, y2, radius) 其中，   x1  贯穿当前路径所在坐标的第一条切线的横坐标   y1  贯穿当前路径所在坐标的第一条切线的纵坐标   x2  贯穿(x1,y1)坐标的第二条切线的横坐标   y2  贯穿(x1,y1)坐标的第二条切线的横坐标   radius 弧半径   这也是一个画弧的方法。它仅 ...
Canvas 
BuN_Ny 评论(0) 有2067人浏览 2011-12-13 14:37

Canvas入门实例05：画一个衣架

本文综合前面的几个例子，画一个晾衣架。 function drawScreen(){ var context = theCanvas.getContext('2d'); context.strokeStyle = 'black'; context.lineWidth = 5; context.beginPath(); ...
Canvas 
BuN_Ny 评论(0) 有1131人浏览 2011-12-13 11:28

Canvas入门实例04：画一个笑脸

本文通过画一个笑脸示例canvas弧线的用法 Canvas画弧线的基本方法如下：   context.arc(x, y, radius, startAngle, endAngle, anticlockwise)  其中：   x 代表圆心横坐标   y 代表圆心纵坐标   radius 代表弧半径   startAngle 代表起始弧度   endAngle 代表结束弧度   ...
Canvas 
BuN_Ny 评论(0) 有3645人浏览 2011-12-12 17:13

Canvas入门实例03：Path的连接点

本文示例path联线之间的拐点样式。   function drawScreen(){ var context = theCanvas.getContext('2d'); context.strokeStyle = '#000000'; context.lineWidth = 20; context.lineJoin = 'miter'; context ...
Canvas 
BuN_Ny 评论(0) 有1018人浏览 2011-12-12 16:07

viewGroup 绘制任一背景图公式

之前有看到有关直接调用桌面的壁纸 不过要求系统最低为2.1 为了在低版本使用，就只能自己绘制图片。 如下为绘制的关键部分。 @Override public void draw(Canvas canvas) { // TODO Auto-generated method stub float left = 0; if (getChildCount() !=0) { final ...
canvasviewgroup壁纸绘制背景 
hsx9566 评论(0) 有2491人浏览 2011-12-11 15:29

Canvas的裁剪功能

    Canvas提供了ClipPath, ClipRect, ClipRegion 等方法来裁剪，通过Path, Rect ,Region 的不同组合，Android几乎可以支持任意现状的裁剪区域。     android.graphics包中定义了Point, Rect, Path, Region 这几种几何形状，Path可以为有圆弧，椭圆，二次曲线，三次曲线，线段，矩形等基本几何图形或是由 ...
canvasclippathclipregioncliprect 
ipjmc 评论(2) 有22281人浏览 2011-12-08 23:51

html5游戏--初试

        我觉得，html5很有前景，移动终端智能化、普及是一个大趋势，html5的应用有跨平台这一大的优势，传统的应用很依赖终端的系统，同样一个应用，html5也能实现，它就可以在所有的智能终端下使用，而且又有本地存储，离线使用等特性，这使得它成为未来的主流         用html5开发游戏是一件很激动人心的事，好的，开始我的html5游戏之路吧         先不看别人怎么写的，先去 ...
html5游戏canvasjavascript 
王斌_code 评论(0) 有985人浏览 2011-12-08 20:20

Android Path的使用

import android.app.Activity; import android.os.Bundle; import android.view.View; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; i ...
androidpaintpathcanvas 
ipjmc 评论(0) 有13051人浏览 2011-12-02 17:51

Chrome中canvas上drawImage无法画出image的解决办法

在自己写demo的过程中 碰到了这样一个问题 发现drawImage方法没有达到预期的效果 图片没办法显示 而fillRect等画图形的方法却工作良好 大概的代码如下： $(function() { var $my_canvas=$("#my_canvas"); var my_canvas=$my_canvas[0]; var context=my_canv ...
canvashtml5 
cookiejj2010 评论(5) 有20336人浏览 2011-12-02 15:32

【HTML5活动】HTML5 Canvas实现贪吃蛇

活动地址：http://html5.group.iteye.com/group/topic/28234   严格来说这片博文不应该叫《HTML5 Canvas实现贪吃蛇》。因为这里除了向给大家展示用Canvas+javascript实现snake外，更重要的是我在写出snake之前，对Canvas学习过程中整理的笔记。因此这篇博文的内容有两个重点：   提供关于Canvas的相关学习文档 ...
html5canvas贪吃蛇 
LeeYee 评论(1) 有2562人浏览 2011-11-26 16:10

Judge Your Browser Support HTML5 Tag

查看你的浏览器是否支持最新的HTML5标签，这里我会用自带的系统函数和Modernizr做对比   1，canvas标签的支持(提供画图功能，将取代falsh) //自定义方法 function supports_canvas() { return !!document.createElement('canvas').getContext; } //Modermizr判断 后面排 ...
html5html tagcanvashml5新标签 
dj4307665 评论(0) 有1803人浏览 2011-11-22 09:54

HTML5 中用CANVAS画一个五角星

HTML5 中用CANVAS画一个五角星,代码如下: <script type="text/javascript"> function init() { var ctx = document.getElementById('stars').getContext('2d'); ctx.fillStyle = "#827839"; ...
canvashtml5 
jackyrong 评论(2) 有8746人浏览 2011-11-17 15:14

HTML5 绘制图形【4】

绘制变形图形 坐标变换 绘制图形的时候，我们可能会想要旋转图形，或对图形使用变形处理，使用Canvas API的坐标轴变换处理功能，可以实现这种效果。 在计算机上绘制图形的时候，是以坐标单位为基准来进行图形绘制的。默认情况下，Canvas画布的最左上角对应于坐标轴原点(0, 0)。如果对这个坐标使用变换处理，就可以实现图形的变形处理了。对坐标的变换处理有三种方式： 平移 使用图形上下文对象 ...
HTML5canvasJavaScript 
lucifinilhades 评论(0) 有1709人浏览 2011-11-08 08:39

HTML5 绘制图形【3】

绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜色。 绘制线性渐变 绘制线性渐变时，需要使用到LinearGradient对象。使用图形上下文对象的createLinearGradient()方法创建该对象。该方法的定义如下： context.createLinearGradient(xStart, yStart, xEnd, yEnd); 该方法有四个参数，前两个参数指定渐变 ...
HTML5canvasJavaScript 
lucifinilhades 评论(0) 有1333人浏览 2011-11-05 19:28

HTML5 绘制图形【2】

使用路径 绘制圆形 要想绘制其他图形，需要使用路径。同样的，绘制开始时还是要取得图形上下文，然后需要执行如下步骤： 开始创建路径； 创建 ...
HTML5canvasJavaScript 
lucifinilhades 评论(0) 有1439人浏览 2011-11-04 11:42

HTML5 绘制图形【1】

canvas元素基础 canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。canvas元素只是一块无色透明的区域。需要利用JavaScript编写在其中进行绘画的脚本。 在页面中放置canvas元素 <!DOCTYPE html> <html> < ...
HTML5JavaScriptcanvas 
lucifinilhades 评论(0) 有1550人浏览 2011-11-03 12:48

pdf转换为html的渲染效果

在服务器端将pdf解析为json格式发送到前端用js渲染成HTML 效果参见附件文件 主要采用的技术有: HTML5的transform HTML5的canvas绘制pdf中的矢量图 将pdf中的内嵌字体转换成Web OpenType字体保证100%的字体渲染效果
pdfhtml5canvas 
adrift 评论(0) 有1315人浏览 2011-11-03 12:16

HTML5 canvas做的一个图片局部放大的效果

看到老外做HTML5的越来越多了,今天看到一个其中用HTML5做的效果不错, 是在canvas上画的圈,做放大器,并且监视了鼠标的相关事件,代码如下: HTML部分 <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8&quo ...
canvashtml5 
jackyrong 评论(0) 有10627人浏览 2011-10-21 11:22

HTML5 Canvas API 学习笔记（二）

离上一篇Canvas学习笔记已由两个月之久，由于工作太忙，所以吧HTML5的学习也放了放。由于过两天要参加一个HTML5游戏开发的活动，为了多了解一点Canvas，今天又研究了一下Canvas的两个方法，文章水平属于初学者，如果哪里说的不对，欢迎大家指出。 今天总结的两个方法，分别是translate()和rotate()。这两个方法也比较简单，就简单总结下好了。 首先是translate(x, ...
canvashtml5 
pnhuang 评论(0) 有1301人浏览 2011-10-20 19:24

最近博客热门TAG

Java(141747) C(73651) C++(68608) SQL(64571) C#(59609) XML(59133) HTML(59043) JavaScript(54918) .net(54785) Web(54513) 工作(54116) Linux(50906) Oracle(49876) 应用服务器(43288) Spring(40812) 编程(39454) Windows(39381) JSP(37542) MySQL(37268) 数据结构(36423)

博客人气排行榜

    博客电子书下载排行

      >>浏览更多下载

      相关资讯

      相关讨论

      Global site tag (gtag.js) - Google Analytics