网格
在真正开始之前,我们需要先探讨 canvas 的网格(grid)或者坐标空间(coordinate space)。在前一页的HTML模板里有一个150像素宽, 150像素高的 canvas 对象。我在画面上叠加上默认网格,如图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角(坐标(0,0))。画面里的所有物体的位置都是相对这个原点。这样,左上角的蓝色方块的位置就是距左边x像素和距上边Y像素(坐标(x, y))。后面的教程中我们将学会如何把移动原点,旋转以及缩放网格。不过现在我们会使用默认的状态。
绘制图形
不像 SVG,canvas 只支持一种基本形状——矩形,所以其它形状都是有一个或多个路径组合而成。还好,有一组路径绘制函数让我们可以绘制相当复杂的形状。
矩形
我们首先看看矩形吧,有三个函数用于绘制矩形的:
fillRect(x,y,width,height); //绘制一个实心矩形
strokeRect(x,y,width,height); //绘制一个矩形轮廓
clearRect(x,y,width,height); //清空特定区域并使其完全透明
它们都接受四个参数, x 和 y 指定矩形左上角(相对于原点)的位置,width 和 height 是矩形的宽和高。好,实战一下吧。
下面就是上页模板里的 draw() 函数,但添加了上面的三个函数。
绘制矩形的例子
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
出来的结果应该和右边的是一样的。fillRect 函数画了一个大的黑色矩形(100x100),clearRect 函数清空了中间 60x60 大小的方块,然后strokeRect 函数又在清空了的空间内勾勒出一个 50x50 的矩形边框。在接下去的页面里,我们会看到和 clearRect 函数差不多另外两个方法,以及如何去改变图形的填充和边框颜色。
与下一节的路径函数不一样,这三个函数的效果会立刻在 canvas 上反映出来。
绘制路径
不像画矩形那样的直截了当,绘制路径是需要一些额外的步骤的。
beginPath();
closePath();
stroke();
fill();
第一步是用 beginPath 创建一个路径。在内存里,路径是以一组子路径(直线,弧线等)的形式储存的,它们共同构成一个图形。每次调用 beginPath,子路径组都会被重置,然后可以绘制新的图形。
第二步就是实际绘制路径的部分,很快我们就会看到。
第三步是调用 closePath 方法,它会尝试用直线连接当前端点与起始端点来关闭路径,但如果图形已经关闭或者只有一个点,它会什么都不做。这一步不是必须的。
最后一步是调用 stroke 或 fill 方法,这时,图形才是实际的绘制到 canvas 上去。stroke 是绘制图形的边框,fill 会用填充出一个实心图形。
注意:当调用 fill 时,开放的路径会自动闭合,而无须调用 closePath 。
画一个简单图形(如三角形)的代码如下。
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
moveTo
moveTo 是一个十分有用的方法,虽然并不能用它来画什么,但却是绘制路径的实用方法的一部分。你可以把它想象成是把笔提起,并从一个点移动到另一个点的过程。
它接受 x 和 y (新的坐标位置)作为参数。
当 canvas 初始化或者调用 beginPath 的时候,起始坐标设置就是原点(0,0)。大多数情况下,我们用 moveTo 方法将起始坐标移至其它地方,或者用于绘制不连续的路径。看看下面的笑脸,红线就是使用 moveTo 移动的轨迹。
试一试下面的代码,粘贴到之前用过的 draw 函数内在看看效果吧。
moveTo 的使用示例
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
//thegoneheart 完整例子
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
ctx.beginPath();
ctx.moveTo(40,75);
ctx.lineTo(60,65);
ctx.lineTo(90,65);
ctx.moveTo(110,75);
ctx.lineTo(125,75);
ctx.stroke();
注意:你可以注释 moveTo 方法来观察那些连接起来的线。
注意:arc 方法的用法见下面。
分享到:
相关推荐
资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
本篇文章主要介绍了JavaScript实现使用Canvas绘制图形的基本教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
《HTML5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
canvas进阶版ppt,学习canvas必备HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制...canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,可以创建丰富的图形引用。
《HTML5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
本文通过八种示例给大家分享了html5 canvas绘图,需要的朋友一起来学习吧
vue之canvas元素拖动及改变形状 vue之canvas元素拖动及改变形状
来源于Mozilla网站的HTML5 Canvas教程...主要内容:Canvas的基本用法,使用Canvas来绘制图形,使用样式和颜色,绘制文本,使用图像,变形,组合,基本动画,高级动画,像素操作,点击区域和无障碍访问,Canvas的优化。
HTML5.Canvas.基础教程教程,包含各类图形的绘制Api和代码示例
HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文...
主要介绍了通过HTML5 Canvas API绘制弧线和圆形的教程,用JavaScript可以自定义弧度以及设定起始终末点,使用JavaScript需要的朋友可以参考下
今天,你将学习一项称为Canvas(画布)的web技术,以及它和文档对象模型(通常被称为DOM)的关联。这项技术非常强大,因为它使web开发人员能够通过使用JavaScript访问和修改HTML元素。 现在你可能想知道为什么我们...
这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作,也可以用来做一些动画。当然,目前 HTML5 规范还在草稿阶段,正式发布也许要等到2010年,不过现在已经有不少浏览器...
一般绘图的方式有两种,即填充和描边,前面的文章已经讲了描边的方法stroke,本文就讲一下Canvas中填充图形的方法。 填充即fill(),很直白吧?而且和strokeStyle表示描边样式一样,fillStyle即表示填充样式。 ctx....
本文讲一下在canvas中画出矩形和圆形的办法,他们属于基础图形。当然,基础图形本来不止他们,但在canvas中,只有画矩形与圆形不需要用其他方法模拟,感兴趣的朋友可以了解下
Canvas API 提供了一个通过JavaScript和HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API主要聚焦于2D图形。而同样使用<canvas>...
本教程主要分为两个部分,第一部分介绍了如何使用canvas技术实现饮料抖动效果,包括如何绘制饮料的图形、如何实现饮料的抖动效果等。第二部分介绍了如何使用canvas技术实现饮料破碎效果,包括如何实现饮料破碎的动画...