30秒canvas速学速会教程

30秒canvas速学速会教程

哈哈,刚想到这个标题的时候其实我也被自己惊到了。可能是天天看自媒体那些文章太多,被他们那群标题党感染了。其实这篇文章的目的就是让读者在极短的时间内掌握canvas的基础使用。当然了高阶技能的开启是没有捷径可走的,大家还是必须脚踏实地的去系统性学习。闲言少叙,下面开始本篇速成教程。

一、画布设定。

  1. <canvas id="test-canvas" width="300" height="200"></canvas>

由于浏览器对HTML5标准支持不一致,所以,通常在<canvas>内部添加一些说明性HTML代码,如果浏览器支持Canvas,它将忽略<canvas>内部的HTML,如果浏览器不支持Canvas,它将显示<canvas>内部的HTML:

  1. <canvas id="test-stock" width="300" height="200">
  2.     <p>Current Price: 25.51</p>
  3. </canvas>

在使用Canvas前,用canvas.getContext来测试浏览器是否支持Canvas:

  1. <!-- HTML代码 -->
  2. <canvas id="test-canvas" width="200" heigth="100">
  3.     <p>你的浏览器不支持Canvas</p>
  4. </canvas>
  1. var canvas = document.getElementById('test-canvas');
  2. if (canvas.getContext) {
  3.     console.log('你的浏览器支持Canvas!');
  4. else {
  5.     console.log('你的浏览器不支持Canvas!');
  6. }

二、2D与3D:

1、getContext('2d')方法让我们拿到一个CanvasRenderingContext2D对象,所有的绘图操作都需要通过这个对象完成。

  1. var ctx = canvas.getContext('2d');

2、如果需要绘制3D怎么办?HTML5还有一个WebGL规范,允许在Canvas中绘制3D图形:

  1. gl = canvas.getContext("webgl");

三、简单2D图形绘制:

我们可以在Canvas上绘制各种形状。在绘制前,我们需要先了解一下Canvas的坐标系统:

canvas速学速会教程

Canvas的坐标以左上角为原点,水平向右为X轴,垂直向下为Y轴,以像素为单位,所以每个点都是非负整数。

CanvasRenderingContext2D对象有若干方法来绘制图形:

  1. 'use strict';
  2. var
  3.     canvas = document.getElementById('test-shape-canvas'),
  4.     ctx = canvas.getContext('2d');
  5.     ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形,擦除的意思是把该区域变为透明
  6.     ctx.fillStyle = '#dddddd'; // 设置颜色
  7.     ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
  8.     // 利用Path绘制复杂路径:
  9.     var path=new Path2D();
  10.     path.arc(75, 75, 50, 0, Math.PI*2, true);
  11.     path.moveTo(110,75);
  12.     path.arc(75, 75, 35, 0, Math.PI, false);
  13.     path.moveTo(65, 65);
  14.     path.arc(60, 65, 5, 0, Math.PI*2, true);
  15.     path.moveTo(95, 65);
  16.     path.arc(90, 65, 5, 0, Math.PI*2, true);
  17.     ctx.strokeStyle = '#0000ff';
  18.     ctx.stroke(path);

演示效果:

canvas速学速会教程

 

四、添加文本:

绘制文本就是在指定的位置输出文本,可以设置文本的字体、样式、阴影等,与CSS完全一致:

  1. 'use strict';
  2. var
  3.     canvas = document.getElementById('test-shape-canvas'),
  4.     ctx = canvas.getContext('2d');
  5. ---------------------------------------------------
  6. ctx.clearRect(0, 0, canvas.width, canvas.height);
  7. ctx.shadowOffsetX = 2;
  8. ctx.shadowOffsetY = 2;
  9. ctx.shadowBlur = 2;
  10. ctx.shadowColor = '#666666';
  11. ctx.font = '24px Arial';
  12. ctx.fillStyle = '#333333';
  13. ctx.fillText('带阴影的文字', 20, 40);

演示效果:

canvas速学速会教程

通过上述简单的演示,相信小白们对于canvas绘图有了一个初步的了解,其实canvas绘图并没有什么神秘之处,关键在于学习。先给画布,然后设定颜色、形状、轨迹。最终形成了一帧一帧的动画。

 

波波

发表评论

您必须 登录 才能发表留言!