<span style="font-family:Microsoft YaHei;"><canvas id="example1" width="400" height="300"></canvas>
// get the canvasvar canvas = document.getElementById('example1');//
get the "2d" contextvar context = canvas.getContext('2d');//
change fill style to orangecontext.fillStyle = '#ff7700';//
draw an orange rectanglecontext.fillRect(0, 0, 400, 300);</span>
你总是通过找到web文档中的元素,然后选择“context”开始canvas绘画。在本例中, context是2 d, 因为我们想用canvas 画二维形状。选择一个context之后,canvas API包含了很多有用的绘图功能,如填充样式,形状,中风,阴影,和大量的其他特性,允许我们给 图片做出奇特的改变。我们的编写的脚本的结果看起来是 这样的 。<canvas>的伟大之处就是它是一个JavaScript API,这意味着我们可以利用所有的JavaScript变量,事件,循环 等等的特点。让我们应用我们的脚本使用一个简单的JavaScript循环在我们的canvas区域创建一个网格的小区域。
<span style="font-family:Microsoft YaHei;"><canvas id="example2" width="400" height="300"></canvas>
// get the canvas and contextvar canvas = document.getElementById('example2');
var context = canvas.getContext('2d');// orange fill stylecontext.fillStyle = '#ff7700';//
create squares in a loopfor(var x = 0; x < canvas.width; x += 25){ for(var y = 0; y
< canvas.height; y += 25){ context.fillRect(x, y, 20, 20); }}</span>
短短几行JavaScript, 在我们的canvas区域能够产生192个方块。在我看来,这是<canvas>的真正价值。它允许我们利用web浏览器的处理能力来生成数学几何和图纸。再加上一点工作和大量的创造力,我们甚至可以利用这种力量的实现 艺术效果。动画
<canvas id="example3" width="400" height="300"></canvas>
// get the canvasvar canvas = document.getElementById('example3');var context =
canvas.getContext('2d');context.fillStyle = '#ff7700';var time = false;//
box positionvar x = -100;// animation loopvar loop = function(){ //
get time since last frame var now = new Date().getTime();
var d = now - (time || now); time = now; // clear previously
drawn rectangles context.clearRect(0, 0, canvas.width, canvas.height);
// draw new rectangle context.fillRect(x, 100, 100, 100);
// advance horizontal position x += 0.1 * d;
// reset horizontal position if(x > canvas.width){ x = -100; } //
request next frame requestAnimationFrame(loop);};// first frameloop();
当在canvas元素中使用动画, 所有绘画应由一个可重复的函数完成。在示例中,使用loop()函数在我们的canvas上画一个正方形。 requestAnimationFrame函数基于可用的处理能力告诉浏览器时自动选择什么时候绘制下一个框架,结果是我们的loop()函数一遍又一 遍的运行, 从左到右推进我们的橙色盒子前进。请注意,我们使用d变量(delta)来确定帧之间的时间,以毫秒为单位。这是使我们的动画速度正常的一个 重要的增加项。没有它,我们的动画在有好一点的处理器的计算机上会跑的更快,几年后当电脑获得更多的处理能力,我们的动画可以跑的更快之快,以至于混淆或 误导用户。使用delta变量,我们可以每毫秒指定一个速度。在我们的示例中, 方块的位置每毫秒前进0.1 * d,或0.1像素,转化后即为每秒 100像素。无论您的处理器的速度是多少, 动画总是花同样多的时间完成。
艺术元素
既然我们了解canvas元素以及如何使用它创建动画,我们可以在这些基础上加上一些艺术创造力来创造更有意思的东西。在下一个示例中,我们将在canvas元素中随机生成彩色圆圈并且和给他们随机轨迹。通过使用渐变画圆圈而不是纯色,我们的“北极光”脚本变得生动起来。
<canvas id="example4" width="400" height="300" style="background-color: #0e74a2;"></canvas>
// get the canvasvar canvas = document.getElementById('example4');var context =
canvas.getContext('2d');var time = false;// create an empty array of "circles"var circles
= [];// animation loopvar loop = function(){ // get time since last frame var now = new Date().getTime();
var d = now - (time || now); time = now; // clear the canvas context.clearRect(0, 0, canvas.width,
canvas.height); // draw circles for(var i = 0; i < circles.length; i++){
circles[i].update(d); circles[i].draw(); } // request next frame requestAnimationFrame(loop);};//
circle objectvar circle = function(options){ // configuration var circle = this; circle.settings =
{ x: 0, y: 0, radius: 20, orientation: 0,
vector: { x: 0, y: 0 }, speed: 1, color: { red: 0, green: 0, blue: 0, alpha: 1 } };
// merge options into settings var newsettings = {};
for(var attrname in circle.settings){ newsettings[attrname]
= circle.settings[attrname]; } for(var attrname in options){ newsettings[attrname] = options[attrname]; }
circle.settings = newsettings; // update circle circle.update = function(d){ // update position
circle.settings.x += circle.settings.vector.x * circle.settings.speed * d;
circle.settings.y += circle.settings.vector.y * circle.settings.speed * d; // bounce
if(circle.settings.x < 0 && circle.settings.vector.x < 0 || circle.settings.x >
canvas.width && circle.settings.vector.x > 0){
circle.settings.vector.x = circle.settings.vector.x * -1; }
if(circle.settings.y < 0 && circle.settings.vector.y < 0 || circle.settings.y >
canvas.height && circle.settings.vector.y > 0){
circle.settings.vector.y = circle.settings.vector.y * -1;
} }; // draw circle circle.draw = function(){ // gradient fill var gradient =
context.createRadialGradient(circle.settings.x, circle.settings.y,
circle.settings.radius / 10, circle.settings.x, circle.settings.y, circle.settings.radius);
gradient.addColorStop(0, 'rgba(' + circle.settings.color.red + ', ' + circle.settings.color.green
+ ', ' + circle.settings.color.blue + ', ' + circle.settings.color.alpha + ')');
gradient.addColorStop(1, 'rgba(' + circle.settings.color.red + ', ' + circle.settings.color.green
+ ', ' + circle.settings.color.blue + ', ' + circle.settings.color.alpha / 50 + ')');
context.fillStyle = gradient; // draw context.beginPath();
context.arc(circle.settings.x, circle.settings.y, circle.settings.radius, 0, 2 * Math.PI, false);
context.fill(); };};// create new circlesvar newcircles = function(){ // remove old circles circles
= []; // create 5 new circles for(var i = 0; i < 5; i++){ // create a new circle
var newcircle = new circle({ x: Math.floor(Math.random() * canvas.width),
y: Math.floor(Math.random() * canvas.height),
radius: Math.floor(Math.random() * canvas.width),
orientation: Math.floor(Math.random() * 360),
vector: { x: Math.random() / 40,
y: Math.random() / 40 }, speed: Math.random(),
color: {
red: 100 + Math.floor(Math.random() * 155),
green: 100 + Math.floor(Math.random() * 155),
blue: 100 + Math.floor(Math.random() * 155),
alpha: 0.1 + Math.random() } });
// add new circle to circles array
circles.push(newcircle);
}};// generate new circleswindow.addEventListener('click', newcircles, false);
window.addEventListener
('touchend', newcircles, false);newcircles();// first frameloop();
在这个窗口每次单击,新的随机圆圈将会出现。我们才刚刚开始理解和利用<canvas>的力量。我渴望了解这个行业如何采用它以及SVG等技术构建惊奇和艺术的web内容。在我的下一篇 文章中,我将展示如何采用此代码使用键盘快捷键和动画来创建一个简单的基于canvas的游戏,让你可以在web浏览器中玩这种游戏。还有更多HTML教程视频供你学习没请登录e良师益友网。