`

HTML 5 Canvas API

 
阅读更多

 

Canvas API 

是HTML 5 最新增加的功能，下面我将简单的介绍一下，Canvas到底是什么

 

Canvas API 是一个画图的画板，没有画板上画不了图的，其中画板默认为width 300 height 150

基本标签

<canvas></canvas>

 

可以加入id等attribute 进行css javascript限制

 

画板开始位置为0，0点，可相应的做偏移和移动

 

如何判断浏览器是否支持那

可参考下面代码

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<script type="text/javascript">

function load()

{

try

{

document.createElement("canvas").getContext("2d");

document.getElementById("support").innerHTML = "Support";

}

catch (e)

{

document.getElementById("support").innerHTML ="Not Support";

}

}

</script>

</head>

<body onload="load();">

<div id = "support"> </div>

</body>

</html>

 

下面介绍一下浏览器对HTML 5　Canvas的支持情况

Chrome　１.０

Firefox　１.５

Internet　Expｌｏrer　不支持

Opera　９.０

Ｓａｆａｒｉ　１.３

 

那么现在就出现一个问题　Internet　Explｏｒｅｒ　不支持怎么办？

 

还好现在有一个插件ExploreCanvas　解决了这个问题

 

<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

在Html中插入上面的话就能解决

 

具体的例子我提供在下面

 

下面说明一下Canvas API的内容


プロパティ説明
width キャンバスの領域の幅(ピクセル)。省略時は300ピクセル。canvasタグのwidth属性に対応。
height キャンバス領域の高さ(ピクセル)。省略時は150ピクセル。canvasタグのheitht属性に対応。
toDataURL(type,args) キャンバスの内容をdata URL文字列で取得。
getContext(cibtextId) 描画コンテキストを取得。引数に"2d"を指定すると、2次元グラフィックス用のコンテキストを取得出来る。


参数： width，height toDataURL getContext（"2d"）// 有可能会有3d，但现在没有




プロパティ説明
canvas この描画コンテキストの基になったcanvas要素への参照。
save() 描画コンテキストの状態をスタックのトップに保存する。
restore() 描画コンテキストの状態をスタックのトップから復元
scale(x,y) 横方向の倍率xと縦方向の倍率yを与えることで、グラフィックの拡大・縮小を行なう。
translate(x,y) 横方向の差分xと縦方向の差分yを与えることで、座標を変更することができる。
transform(m11,m12,m21,m22,dx,dy) 座標変換マトリックスに直接変更を加える。複数回呼び出すと、同じ変換マトリックスに対して変更が何度も適用される。
setTransform(m11,m12,m21,m22,dx,dy) 座標変換マトリックスを初期化した後、渡された引数でtransform()の呼び出しを行なう。
globalAlpha 線や塗りつぶしを行なう際の透明度を、0.0から1.0の間で指定する(デフォルトは1.0)
globalCompositeOperation 描画領域が重なった際の挙動を指定
strokeStyle 線を描画する際のスタイル。デフォルトは黒。
fillStyle 塗りつぶしを行なう際のスタイル。デフォルトは黒。
createLinearGradient(x0,y0,x1,y1) 線形グラデーションを作成。(x0,y1)で指定した座標から、(x1,y1)に向かって直線的に色合いが変化していく
createRadialGradient(x0,y0,r0,x1,y1,r1) 円形グラデーションを作成。(x0,y0)を中心としてr0を半径とする円と、(x1,y1)を中心としてr1を半径とする円の間が、グラデーションによって塗りつぶされる。
createPattern(image,repetition) 指定されたグラフィックス要素を用いて、線や塗りつぶしのパターンを作成する。
lineWidth 線の太さをピクセル単位で指定する。デフォルトは1ピクセル。
lineCap 線の終端のスタイルを指定する。"butt"、"round"、"square"のいずれかを指定可能(デフォルトは"butt")
lineJoin 線が交差して出来る角のスタイルを指定する。"round"、"bevel"、"miter"のいずれかを指定可能(デフォルトは"miter")
shadowOffsetX 影を表示する位置のX座標。対象から何ピクセル離れているかを指定(デフォルトでは0)。
shadowOffsetY 影を表示する位置のY座標。対象から何ピクセル離れているかを指定(デフォルトでは0)。
shadowBlur 影のぼかし幅(デフォルトでは0)。
shadowColor 影の色。CSSカラーの形式に則った文字列を指定できる(デフォルトでは透明)。
clearRect(x,y,w,h) 指定した四角形の領域をクリアする。(x,y)が四角形の左上の頂点となり、wは四角形の幅、hは高さを表す。
beginPath() 新たにパス描画を開始する。それまでに描いていたパスはすべてリセットされる。
closePath パスが閉じられていない場合、最後に描画したサブパスの終点から、パスの始点に向かって直線を引くことでパスを自動的に閉じる。
move(x,y) サブパスの描画を開始する座標を移動する。
lineTo(x,y) 現在の点と指定した座標を結ぶ直線を描画。
quadraticCurveTo(cpx,xpy,x,y) 二次ベジェ曲線を描画。現在位置と、引数で渡された座標(x,y)をつなぐ曲線を描画し、曲線のカーブは(cpx,xpyの座標によって決まる)。
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 三次ベジェ曲線を描画。制御点は引数で渡した3つの座標と、現在の座標になる。
arcTo(x1,y1,x2,y2,radius) 直線とそれに接する円弧を描画
rect(x,y,w,h) 直線とそれに接する円弧を描画。
arc(x,y,radius,startAngle,endAngle,anticlockwise) 円弧を描く。完全な円を描くことも、その一部である曲線を描くことも可能
fill() パス内部を塗りつぶす。塗りつぶしの色やスタイルは、fillStyleプロパティによって指定できる。
stroke() パスを線として表示。線の色やスタイルはstrokeStyleプロパティによって指定することが可能。
clip() パスの内部をクリッピング領域として指定。クリッピング領域はbeginPath()を呼び出すことで解除が出来る。
isPointInPath(x,y) 指定されたポイントが、現在のパス上に存在するかどうかを返す。
font CSSのfontプロパティと同様で、テキストフォントを指定(デフォルトは"10px sans-serif")。
textAlign 文字列の横方向の表示位置を指定。
textBaseLine テキストが表示される位置のベースラインを指定。
fillText(text,x,y,maxWidth) 指定した文字列を、(x,y)を基準とした位置に描画。塗りつぶしのみを行なう。maxWidthを指定すると、文字列の横幅がその値に合わせて縮小される。
strokeText(text,x,y,maxWidth) 指定した文字列を、(x,y)を基準とした位置に描画。枠線の描画のみを行なう。
measureText(text) 現在のフォントを用いて文字列を描画した場合の各種情報を測定できる。
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) 指定されたグラフィック要素をキャンバスに書き出す。
createImageData(sw,sh) 幅widht、高さheightからなるImageDataを作成。ImageDataは透明に初期化されている。
getImageData(sx,sy,sw,sh) 現在のキャンバスに描画されている画像をImageDataとして取得。(x,y)を左端上の頂点とし、幅width、高さheightの四角形からなる範囲のビットマップが対象となる。
putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight) imagedataの内容をキャンバスに書き出す。

我把常用的标签用黄色标记了，请大家注意

 

 

 

 

0
顶
1
踩
分享到：
| CKEditor 搭建
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5 CanvasAPI

    HTML5 Canvas API 是一项强大的技术，它允许在网页中直接绘制图形、图表、图像以及动画。与传统的图像加CSS的方法相比，Canvas API 提供了一种更为灵活和强大的渲染系统，可以动态生成内容，并且能够很好地处理用户...

    Html5 Canvas API

    HTML5 Canvas API 是一个强大的网页图形绘制工具，它允许...提供的HTML5CanvasAPI.htm文件可能包含了这些知识点的实例代码，可以作为学习和参考的宝贵资源。而Image文件可能用于演示如何在Canvas上处理和绘制图像。

    HTML5canvasAPI

    HTML5 Canvas API是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，无需依赖任何外部插件。这个API提供了一系列的方法和属性，让开发者能够直接通过JavaScript来控制网页上的画布元素，实现丰富的...

    HTML5 Canvas API 教程

    ### HTML5 Canvas API 教程知识点详解 #### 一、HTML5 Canvas API 概述 HTML5 Canvas API 提供了一套强大的工具集，允许开发者直接在网页上进行绘图操作，而无需借助 Flash 或其他插件。Canvas API 主要通过 `...

    HTML5 Canvasapi的PPT详细讲义

    HTML5 Canvas API是Web开发中的一个关键特性，它允许开发者在网页上进行动态图形绘制，提供了丰富的绘图功能，使得创建交互式图表、游戏、动画等成为可能。这份"HTML5 Canvas API的PPT详细讲义"包含了85页内容，共...

    基于HTML5 CanvasAPI的“俄罗斯方块”小游戏.zip

    在这个"基于HTML5 CanvasAPI的“俄罗斯方块”小游戏"中，我们可以看到HTML5的Canvas API是如何被用来创建一个经典的游戏体验的。 首先，Canvas API的核心是`&lt;canvas&gt;`元素，它在HTML中定义了一个画布，通过...

    OpenSC2K基于HTML5CanvasAPI和SQLite使用JavaScript重构SimCity2000

    《OpenSC2K：JavaScript与HTML5 Canvas API与SQLite重塑SimCity 2000的探索》 在当今数字化时代，经典游戏的重制与重构成为了一种趋势，旨在为现代用户带来怀旧体验的同时，利用新技术提升游戏性能和交互性。OpenSC...

    使用HTML5CanvasAPI和jwagner的SimplexNoise库创建了五个环境网页背景

    在这个项目中，"使用HTML5CanvasAPI和jwagner的SimplexNoise库创建了五个环境网页背景"，开发者巧妙地结合了Canvas API与Simplex噪声算法，为网页设计了五种独特的背景样式。 Simplex噪声是一种在2D、3D甚至更高...

    canvas：Canvas是一个基于OpenGL或使用与HTML5 canvas API非常相似的软件渲染的Go图形库

    去画布 Canvas是一个纯Go库，提供的绘图功能与HTML5 canvas API尽可能相似。 它与HTML或Javascript无关，只是使它们的功能大致相同。 支持大多数功能，但仍在进行中。 该库旨在以与Javascript API相似的方式在每个...

    html5 canvas云粒子数字时钟动画特效

    1. HTML5 Canvas API： HTML5 Canvas是一个基于矢量图形的画布，通过JavaScript来控制。它提供了各种绘图方法，如`fillRect()`用于填充矩形，`beginPath()`和`stroke()`用于绘制路径，以及`arc()`用于绘制圆弧等。...

    用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能

    HTML5 Canvas API是现代网页设计中非常重要的技术之一，它允许开发者在网页上直接绘制图形。在使用Canvas进行绘图时，我们可能会需要撤销之前的绘制操作，这时候就需要用到橡皮擦功能。HTML5 Canvas API中的...

    html5 canvas熊熊火焰动画特效

    在这个“html5 canvas熊熊火焰动画特效”中，我们将深入探讨如何利用HTML5 Canvas API创建逼真的火焰动画效果。 首先，要实现这样的动画，我们需要了解Canvas的基本用法。Canvas是一个基于矢量图形的画布，通过...

    html5 canvas绘制3D地球旋转动画特效

    在这个“html5 canvas绘制3D地球旋转动画特效”中，我们将深入探讨如何利用HTML5 Canvas API来创建一个逼真的3D地球模型，并实现其旋转的动画效果。 首先，我们需要理解Canvas的基本用法。Canvas是一个矩形区域，在...

    html5 canvas模仿flash的简单动画banner Demo

    这个“html5 canvas模仿flash的简单动画banner Demo”就是利用Canvas API来实现类似Flash的动态广告效果的一个实例。下面将详细探讨相关的知识点。 1. HTML5 Canvas API： - `canvas`元素：HTML5中的`&lt;canvas&gt;`...

    详解如何用HTML5 Canvas API控制图片的缩放变换

    在HTML5中，Canvas API提供了一种强大的方式来绘制图形和图像，包括对这些元素进行复杂的变换，如缩放、旋转和移动。本篇文章将详细讲解如何使用Canvas API中的`scale()`方法来控制图片的缩放变换。 首先，`scale...

    html5 canvas绘制虚幻扭曲背景动画特效

    在这个“html5 canvas绘制虚幻扭曲背景动画特效”中，我们将深入探讨如何利用HTML5 Canvas API实现这样的效果。 首先，Canvas API提供了一个二维渲染上下文，通过JavaScript代码来控制画布上的图形绘制。开发者可以...

    HTML5 Canvas炫酷3D背景动画代码HTML5 Canvas炫酷3D背景动画代码.zip

    在这个“HTML5 Canvas炫酷3D背景动画代码”项目中，我们将深入探讨如何利用Canvas API来创建引人入胜的3D背景动画。 1. **Canvas API基础** HTML5 Canvas API提供了丰富的绘图命令，如`fillRect`、`strokeRect`、`...

Magicbox
Global site tag (gtag.js) - Google Analytics