搜索
首页web前端H5教程canvas API ,通俗的canvas基础知识(一)

在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天了(注意,这里不是要升天啊),那时候一直不敢涉猎的原因主要是,第一,在还需要兼容IE的时代,兼容性是硬伤;第二,参考资料的如此的少,又或是参考资料五花八门,没有适合入门的比较好的参考文章,第三,canvas之所以能无所不能,其最大的原因是有一个好伙伴JavaScript,那是的JavaScript还是不甚了解。(借口真多)现在好了,终于有时间,有精力来研究研究这神秘莫测的canvas,考虑到现在适合入门的canvas基础知识点的文字少之又少,于是,决定在接下来的一段时间里,将canvas的API梳理一遍,毕竟工欲善其事,必先利其器嘛,废话不多说,咱们就开始吧!

注:以下API中的各个属性和方法都是目前支持的,不完全支持的就没有介绍了!

初识canvas

要学习canvas,必先知道canvas为何物?

<canvas></canvas>

首先canvas只是html5中的一个便签而已,表示的意思是一个画布,它本身没有任何作用,就相当于是一个画板,你可以在它上面画任何你想画的东西,那如果我们不给它设置任何的属性和样式,它的默认状态是什么呢?运行上面的代码可得如下:

canvas API ,通俗的canvas基础知识(一)

默认的宽度为300px,高度为150px,当body背景为白色时,它的背景为白色,body背景为灰色时,它的背景为灰色,可知它的默认背景为透明色

<canvas></canvas>
你是什么类型的标签?

在它后面加一个内联样式的标签,看看它是什么类型的标签
canvas API ,通俗的canvas基础知识(一)
span到它的右侧去了,说明它是一个行内元素,好了,基本情况我们算了解了,那我们怎么修改它的默认样式呢?
首先,canvas作为一个html5比较特殊的标签,也是支持样式控制的,比如设置边框,边距,背景等等,但是有一个地方值得注意的是,在设置canvas宽高时,如果用style样式来设置的话,会出现一点小问题,具体什么问题,暂且卖个关子,后面为大家介绍,所以宽高还是在标签上设置比较好

<canvas width="400" height="400" id="canvas"></canvas>

当然,canvas目前只是一个画板而已,没有画笔,你什么也做不了,那画笔是什么呢,这里就是我们主角的开始了

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");     //目前只有2d,没有3d,以后会有的,如果想了解3d,可以看一下webGL

getContext("2d")是canvas的绘图环境,只有引入它才能进行绘图

有时我在想,canvas绘图都是在js里面完成的,那么它本身的标签能不能写东西呢,比如,如果在它里面放一张图片,嘻嘻,会怎么样,那我们说干就干

<canvas width="400" height="400" id="canvas">
        <img src="1.jpg" width="400" height="400" alt="">
</canvas>

当当当当,见证奇迹!马丹,标准浏览器下,什么都没有,看看不争气的IE,亮瞎眼,活脱脱一个大美女出现了

canvas API ,通俗的canvas基础知识(一)

由此可见,在支持canvas的浏览器,canvas里面的东西是不会显示的,但是在不支持的情况下,会赤裸裸的显示出来,于是,我们可以把它作为提示用语,用来告诉不支持的浏览器,该换换了

<canvas width="400" height="400" id="canvas">
        <span>亲,您的浏览器不支持canvas,换个浏览器试试吧!</span>
</canvas>

恩,对于IE家族的低版本成员,年纪太大,只能这么处理了,如果你非要支持IE,可以试试explorercanvas开源项目,里面有一个excanvas.js,当然,在使用的时候注明是在ie下引用,地址我就没给了,我也没打算去研究它,因为我断定,不久的将来,IE8以下浏览器就不见了,呵呵,但愿它快点到来!
前面都是聊骚,正在的主角才刚开始,任务艰巨,任重而道远啊,canvas API分为属性部分和方法部分,但是我不想这么来讲,这样太机械了,看不懂的人依旧是看不懂,接下来的API我会采用相关属性,方法交叉讲解,再辅以小实例,相信这样更让人看得懂,而且会印象深刻,想想还有点小激动呢,API较长,只能分几期来讲了!
由于canvas默认背景为透明色,为区别画布与body,以后的画布样式统一设置为如下:

body{ background:#ccc;}
canvas{ background:#fff;}

画画嘛,都是从点,线,圆,框开始的,那我们就从点开始吧!
MoveTo(x,y) 顾名思义,就是移动到某个坐标点上,x,y 分别表示x轴坐标和y轴坐标

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.moveTo(100,100);

当然是不会有任何的效果的,因为这里的意思就相当于把笔移动了100,100的位置,还没有下笔呢,这并不是然并卵,这个是画笔作画的起点,比如画直线,2点一线,只需再做一点就可以画直线了
lineTo(x,y) 意思是连接最后一点的坐标,但是不画,x,y 分别表示x轴坐标和y轴坐标

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.moveTo(100,100);
ctx.lineTo(200,200);

然而并没有任何效果,这是为什么呢,实际上,上面只是标注了直线的起点和终点,还没添墨水呢,何为墨水呢?

下面就来介绍我们的黑白双煞:

fill()  填充,此为实心的

stroke()  绘制,此为空心的

因为线条的宽度只有一个像素,所以无法进行填充,于是画线段用fill()方法是没有用的,

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.moveTo(100,100);
ctx.lineTo(200,200);
ctx.stroke();

结果:

canvas API ,通俗的canvas基础知识(一)

此黑白双煞在以后的绘图中起到核心作用,切记这2个方法(为什么我叫它们黑白双煞呢,因为canvas默认颜色为黑色,fill()填充颜色为一坨黑,stroke()绘制就像描边一样,一个框,里面是透明的,由此得名,哈哈,方便记忆)。
点,线之后便是面了,我们来绘制矩形吧,矩形也有三兄弟,暂且命名为阮氏三兄弟:
rect(x,y,w,h)   在x,y坐标点绘制一个矩形,宽高为w,h,此方法只是绘制路径,必须用黑白双煞才能显示
fillRect(x,y,w,h)  在x,y坐标点绘制一个填充矩形,宽高为w,h
strokeRect(x,y,w,h)  在x,y坐标点绘制一个描边矩形,宽高为w,h
分别看看它们的表现

//不用黑白双煞
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.rect(5.5,5.5,100,100);
//用stroke
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.rect(5.5,5.5,100,100)
ctx.stroke();
//用fill
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.rect(5.5,5.5,100,100)
ctx.fill();
//用strokeRect
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(5.5,5.5,100,100);
//用fillRect
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(5.5,5.5,100,100);


canvas API ,通俗的canvas基础知识(一)

canvas API ,通俗的canvas基础知识(一)

canvas API ,通俗的canvas基础知识(一)

canvas API ,通俗的canvas基础知识(一)

canvas API ,通俗的canvas基础知识(一)

为了便于演示,我将画布缩小到(120*120),以上为各个组合的表现,从这些表现可以总结一下几点:

1、rect()不能单独使用,必须借助fill(),stroke()方法;

2、rect()+stroke() 组合的效果和strokeRect()一致,可等价

3、rect()+fill() 组合的效果和fillRect()一致,可等价

这里还有一个小细节需要注意的是,我这个的坐标写的是5.5而不是6或5,为什么?理论上绘制的线框是一个1像素的宽度的,因为一个点就是一像素,当坐标设为(6,6)时,表现会是如下:

canvas API ,通俗的canvas基础知识(一)

对比上图明显粗一些,明显是2个像素的宽度,这是为什么呢?给大家画一个图

canvas API ,通俗的canvas基础知识(一)

这3条线分别是5像素,6像素,7像素位置,图形绘制时,绘制6像素的地方向左绘制0.5像素,向右绘制0.5像素,但是浏览器实际上是不纯在半个像素的,所以浏览器会帮我们补上个半个像素,就成了2个像素了,如果要做成1像素边框,只需将坐标左移或右移半个像素,即0.5px,如果要精确绘图,须知这一点细节!

矩形之后就可以画圆了,但是圆相对来说比较复杂,咱们还是先来练练字,谢谢书法,哈哈,看看canvas编辑文字有哪些方法:

我们说画布上的图形皆为路径,所以,文字作为另一种图形,也存在黑白双煞:

fillText(text,x,y,[maxWidth]);  顾名思义,这是填充文字

strokeText(text,x,y,[maxWidth]); 顾名思义,这是描边文字

参数:

text :需要绘制的文字

x,y: 文字绘制的起始坐标

[maxWidth] : 文字的最大宽度,选填

//为省篇幅,我合起来写了,你想看到各自的效果,请分开运行
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillText(&#39;你想对我说什么&#39;,50,50);
ctx.strokeText(&#39;你想对我说什么&#39;,50,50);



canvas API ,通俗的canvas基础知识(一)

canvas API ,通俗的canvas基础知识(一)

咋一看,你会说,咦,怎么描边文字看上去像是加粗的啊,为什么会这样呢?在此稍作悬念,下面揭晓!

我们看一下文字的默认表现:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillText(&#39;你想对我说什么&#39;,0,0);



canvas API ,通俗的canvas基础知识(一)

结果简直让人大吃一精,哎,是惊!文字怎么跑那里去了,了解css 的都知道,文字是有基准线的,这玩意也是老外的英文搞出来的,html文字基准线是baseline,可以用vertical-align来修改基准线,canvas有吗?哈哈,还真有:

textBaseline

参数:

alphabetic : 默认。文本基线是普通的字母基线。

top : 文本基线是 em 方框的顶端。

hanging : 文本基线是悬挂基线。

middle :文本基线是 em 方框的正中。

ideographic : 文本基线是表意基线。

bottom :文本基线是 em 方框的底端。

看着不懂?我也不太懂,文字不如图片,看看这2张示意图:

canvas API ,通俗的canvas基础知识(一)

canvas API ,通俗的canvas基础知识(一)

实际显示:

//为了让bottom看得到,我将文字向下偏移20像素
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="20px Arial";
ctx.textBaseline = "bottom";
ctx.fillText(&#39;你想对我说什么&#39;,0,20);



canvas API ,通俗的canvas基础知识(一)

canvas API ,通俗的canvas基础知识(一)

canvas API ,通俗的canvas基础知识(一)

canvas API ,通俗的canvas基础知识(一)

canvas API ,通俗的canvas基础知识(一)

canvas API ,通俗的canvas基础知识(一)

图没有截对齐,凑合着看吧,哦,没有在20px位置画条线,算了,不纠结了,结合上面的图看吧!

只要是文字,那就应该可以设置文字样式,比如css中可以设置颜色,字体,字体大小,等等,css可不可以设置canvas样式呢?咱们说干就干:

canvas{ background:#fff; font-family:"微软雅黑"; font-size:20px; color:#f00; text-align:center;}



好像没什么反应,老年痴呆了?既然css无法设样式,那怎么给文字设置样式呢?

还好强大的canvas自带样式设置技能,走哪里都不怕,我们看看有哪些:

font  参数:font-style font-variant font-weight font-size font-family,分别表示的意思是字体样式(如倾斜),是否大小写,字体粗细,字体大小,字体

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="italic bold 40px 微软雅黑 ";
ctx.textBaseline = "top";
ctx.fillStyle = &#39;red&#39;;
ctx.fillText(&#39;a你想对我说什么&#39;,0,20);



canvas API ,通俗的canvas基础知识(一)

这只是部分的font属性,起用法与css相同,有兴趣可以自己试一试。

textAlign 参数:left(默认,文本左对齐),right(文本右对齐),center(文本在指定位置居中),start(文本开始位置),end(文本结束位置)

这个其实也挺怪异的,如图:

canvas API ,通俗的canvas基础知识(一)

默认是左对齐,右对齐都跑出去了,center就只有一半,一般我们要想将文字居中对齐,其实不用center,而是通过坐标来居中,后面我会给一个文本上下左右居中的小实例供大家参考!

这里说错了,这里的蓝色的竖线是表示文本的开始水平位置,start与left效果相同,都是向左对齐,end和right效果相同,都是在起始点的左边向右对齐,而center则是以这个点为中心点对齐!

字体颜色也跟黑白双煞对应:

strokeStyle  fillStyle

用法一样,如:

strokeStyle = color 可设颜色

strokeStyle = gradient  可设渐变对象

strokeStyle  = pattern  可创建 pattern 笔触的 pattern 对象

现在可以揭晓上面的悬念了,我觉得实例更能说明问题:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="40px Arial";
ctx.textBaseline = "top";
ctx.textAlign = &#39;left&#39;;
ctx.fillStyle = &#39;red&#39;;
ctx.fillText(&#39;你想对我说什么&#39;,0,20);
ctx.strokeStyle = &#39;green&#39;;
ctx.strokeText(&#39;你想对我说什么&#39;,0,60);



效果:

canvas API ,通俗的canvas基础知识(一)

如图所示,描边文字并不是加粗的,而是对文字进行描边了,文字小时,就挤到一起了。

我们都知道,css3有一个新样式 -- text-shadow,表示文字的阴影,canvas也有类似的功能,咱们就来对比一下吧!

shadowOffsetX  阴影距形状的水平距离

shadowOffsetY  阴影距形状的垂直距离

shadowBlur  阴影的模糊级别,这里是高斯模糊,默认值为0

shadowColor  阴影的颜色

其实这个跟css3的阴影设置很相似,我就一起来看一下吧

html:

<canvas width="300" height="200" id="canvas">
        <span>亲,您的浏览器不支持canvas,换个浏览器试试吧!</span>
</canvas>
<span>你想对我说什么</span>

css:

body{ background:#ccc;}
canvas{ background:#fff;}
span{ font-size:40px; font-family:Arial; color:red; text-shadow:5px 5px 5px #000; vertical-align: top; display:inline-block;}

js:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="40px Arial";
ctx.textBaseline = "top";
ctx.textAlign = &#39;left&#39;;
ctx.fillStyle = &#39;red&#39;;
        
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 5;
ctx.shadowColor = &#39;#000&#39;;
        
ctx.fillText(&#39;你想对我说什么&#39;,0,20);
ctx.strokeStyle = &#39;green&#39;;
ctx.strokeText(&#39;你想对我说什么&#39;,0,60);


效果:

canvas API ,通俗的canvas基础知识(一)

看看,基本无差吧,但是还是有一点小区别的,如果给css3的text-shadow不设阴影颜色,它的阴影颜色会默认跟字体颜色一样,但是如果如果不设shadowColor ;则阴影是出不来的,不信?看下图:

canvas API ,通俗的canvas基础知识(一)

补充一点:

measureText(text)  返回文本的宽度,单位为像素,用法是:

measureText(text).width

注意:此方法只能获取到宽度,不能获取到高度,跟我们一般获取宽高的方法有点不一样,它可以在文本输出前计算出其宽度,故如果想在文本输出前知道其宽度,这个方法只好有用武之地

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="24px 微软雅黑";
ctx.fillStyle = &#39;red&#39;;
var txt = "快告诉我们我自己有多宽";
var w = ctx.measureText(txt).width;
ctx.fillText(&#39;你的宽度:&#39;+w,0,50);
ctx.fillText(txt,0,100);

canvas API ,通俗的canvas基础知识(一)

 以上就是canvas API ,通俗的canvas基础知识(一) 的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关文章:

canvas API 介绍,常见的canvas基础知识(二)

canvas API 介绍,常见的canvas基础知识(三)

canvas API 介绍,常见的canvas基础知识(四)

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
H5和HTML5之间的连接:相似性和差异H5和HTML5之间的连接:相似性和差异Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念:HTML5是HTML的一个版本,包含新元素和API;H5是基于HTML5的移动应用开发框架。HTML5通过浏览器解析和渲染代码,H5应用则需要容器运行并通过JavaScript与原生代码交互。

H5代码的基础:密钥元素及其目的H5代码的基础:密钥元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等,用于构建现代网页。1.定义头部内容,2.用于导航链接,3.表示独立文章内容,4.组织页面内容,5.展示侧边栏内容,6.定义页脚,这些元素增强了网页的结构和功能性。

HTML5和H5:了解常见用法HTML5和H5:了解常见用法Apr 22, 2025 am 12:01 AM

HTML5和H5没有区别,H5是HTML5的简称。1.HTML5是HTML的第五个版本,增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用,适用于各种移动设备。

HTML5:现代网络的基础(H5)HTML5:现代网络的基础(H5)Apr 21, 2025 am 12:05 AM

HTML5是超文本标记语言的最新版本,由W3C标准化。HTML5引入了新的语义化标签、多媒体支持和表单增强,提升了网页结构、用户体验和SEO效果。HTML5引入了新的语义化标签,如、、、等,使网页结构更清晰,SEO效果更好。HTML5支持多媒体元素和,无需第三方插件,提升了用户体验和加载速度。HTML5增强了表单功能,引入了新的输入类型如、等,提高了用户体验和表单验证效率。

H5代码:编写清洁有效的HTML5H5代码:编写清洁有效的HTML5Apr 20, 2025 am 12:06 AM

如何写出干净高效的HTML5代码?答案是通过语义化标签、结构化代码、性能优化和避免常见错误。1.使用语义化标签如、等,提升代码可读性和SEO效果。2.保持代码结构化和可读性,使用适当缩进和注释。3.优化性能,通过减少不必要的标签、使用CDN和压缩代码。4.避免常见错误,如标签未闭合,确保代码有效性。

H5:如何增强网络上的用户体验H5:如何增强网络上的用户体验Apr 19, 2025 am 12:08 AM

H5通过多媒体支持、离线存储和性能优化提升网页用户体验。1)多媒体支持:H5的和元素简化开发,提升用户体验。2)离线存储:WebStorage和IndexedDB允许离线使用,提升体验。3)性能优化:WebWorkers和元素优化性能,减少带宽消耗。

解构H5代码:标签,元素和属性解构H5代码:标签,元素和属性Apr 18, 2025 am 12:06 AM

HTML5代码由标签、元素和属性组成:1.标签定义内容类型,用尖括号包围,如。2.元素由开始标签、内容和结束标签组成,如内容。3.属性在开始标签中定义键值对,增强功能,如。这些是构建网页结构的基本单位。

了解H5代码:HTML5的基本原理了解H5代码:HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是构建现代网页的关键技术,提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等,增强了网页结构和SEO。2.支持多媒体元素和,无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性,简化了验证过程。4.提供了离线和本地存储功能,提升了网页性能和用户体验。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)