html5畫布canvas
canvas 元素用於在網頁上繪製圖形。
建立 Canvas 元素
<canvas id="myCanvas" width="200" height="100"></canvas>
通過 JavaScript 來繪製
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
getContext(“2d”) 物件是內建的 HTML5 物件,擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法。
canvas變換
translate(偏移):以起始點為基準點,移動當前座標位置
rotate(旋轉):引數為弧度
scale(縮放)
例項(漫天飛雪)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
* {margin: 0; padding: 0;}</p> <p>body {
/*You can use any kind of background here.*/
background: #6b92b9;
}
canvas {
display: block;
}
body{
background:#6b92b9;
}
</style>
</head>
<body>
<button id="btn">Hello</button>
<canvas id="canvas" width="100%" height="100%" style="position:fixed; top:0px;left:0px;z-index:80;pointer-events:none;"></canvas>
<script>
window.onload = function(){
//canvas init
var canvas = document.getElementById("canvas");
var btn = document.getElementById("btn");
btn.onclick = function()
{
//alert(this.innerHTML);
this.innerHTML="pressed";
}
var ctx = canvas.getContext("2d");
//canvas dimensions
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
//snowflake particles
var mp = 500; //max particles
var particles = [];
for(var i = 0; i < mp; i++)
{
particles.push({
x: Math.random()*W, //x-coordinate
y: Math.random()*H, //y-coordinate
r: Math.random()*3+1, //radius
d: Math.random()*mp //density
})
}
//Lets draw the flakes
function draw()
{
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
/* ctx.fillStyle = "#FF0000";*/
ctx.beginPath();
for(var i = 0; i < mp; i++)
{
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
}
ctx.fill();
update();
}
//Function to move the snowflakes
//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
var angle = 0;
function update()
{
angle += 0.01;
for(var i = 0; i < mp; i++)
{
var p = particles[i];
//Updating X and Y coordinates
//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
//Every particle has its own density which can be used to make the downward movement different for each flake
//Lets make it more random by adding in the radius
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
p.x += Math.sin(angle) * 2;
//Sending flakes back from the top when it exits
//Lets make it a bit more organic and let flakes enter from the left and right also.
if(p.x > W || p.x < 0 || p.y > H)
{
if(i%3 > 0) //66.67% of the flakes
{
particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
}
else
{
//If the flake is exitting from the right
if(Math.sin(angle) > 0)
{
//Enter fromth
particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
}
else
{
//Enter from the right
particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
}
}
}
}
}
//animation loop
setInterval(draw, 50);
}
</script>
</body>
</html>
相關文章
- html5中canvas元素建立畫布介紹HTMLCanvas
- 瞭解canvas畫布Canvas
- Tkinter (03) 畫布部件 CanvasCanvas
- canvas畫布效果程式碼Canvas
- HTML5畫布概述HTML
- HTML5畫布: clearRect()HTML
- HTML5 Canvas(畫布)實戰程式設計初級篇:基本介紹和基礎畫布元素HTMLCanvas程式設計
- HTML5畫布canvas隨機生成圓形和正方形HTMLCanvas隨機
- HTML5的畫布:PathsHTML
- HTML5畫布-小球碰撞HTML
- canvas簡單的畫布動畫 - KaiqisanCanvas動畫AI
- HTML5怎樣建立畫布?HTML
- canvas畫布基本知識點總結Canvas
- 如何抓取canvas畫布中的圖片Canvas
- CSS與canvas屬性設定畫布尺寸CSSCanvas
- CSS 與 canvas 屬性設定畫布尺寸CSSCanvas
- 10個出色的HTML5畫布示例HTML
- 用HTML5的canvas畫太陽系HTMLCanvas
- 利用分層優化 HTML5 畫布渲染優化HTML
- canvas學習筆記-2d畫布基礎Canvas筆記
- CSS和canvas標籤設定畫布尺寸區別CSSCanvas
- 基於canvas畫布的兩個炫酷效果展示Canvas
- 利用html5 canvas 畫圖的一個例子HTMLCanvas
- 超酷的HTML5 Canvas網路畫板教程HTMLCanvas
- HTML5畫布如何設定線的樣式?HTML
- HTML5的畫布:Stroke(筆觸)和Fill(填充)HTML
- HTML5 canvas遊戲開發實戰 5 : 石頭剪刀布HTMLCanvas遊戲開發
- 【 HTML5畫布漂浮分子 讓化學動起來!】HTML
- Web開發者需知的15個HTML5畫布應用WebHTML
- canvas畫素畫板Canvas
- HTML5 -- CanvasHTMLCanvas
- 熬夜總結了 “HTML5畫布” 的知識點(共10條)HTML
- Android 利用 Canvas 畫畫板AndroidCanvas
- HTML5的CanvasHTMLCanvas
- 商業模式畫布模式
- css設定canvas畫布尺寸與width和height設定的區別CSSCanvas
- 未來web瀏覽技術提前體驗:10個會讓你驚歎不已的HTML5畫布(canvas)技術應用演示WebHTMLCanvas
- 用canvas 畫煙花Canvas