搜索
首页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
Vue和Canvas:如何实现手写签名和手势识别功能Vue和Canvas:如何实现手写签名和手势识别功能Jul 18, 2023 am 08:49 AM

Vue和Canvas:如何实现手写签名和手势识别功能引言:手写签名和手势识别功能在现代应用程序中越来越常见,它们可以为用户提供更加直观和自然的交互方式。Vue.js作为一款流行的前端框架,搭配Canvas元素可以实现这两个功能。本文将介绍如何使用Vue.js和Canvas元素来实现手写签名和手势识别功能,并给出相应的代码示例。一、手写签名功能实现要实现手写签

Canvas的优势有哪些Canvas的优势有哪些Aug 17, 2023 pm 04:52 PM

canvas的优势有强大的绘图功能、高性能、跨平台兼容性、支持多种图形格式、可以与其他Web技术集成、可以实现动态效果和可以实现复杂的图像处理。详细介绍:1、Canvas提供了丰富的绘图功能,可以绘制各种形状、线条、文本、图像等;2、Canvas在浏览器中直接操作像素,因此具有很高的性能;3、Canvas是基于HTML5标准的一部分,可以在各种现代浏览器上运行等等。

如何利用Vue和Canvas创建逼真的天气动态背景如何利用Vue和Canvas创建逼真的天气动态背景Jul 17, 2023 am 08:33 AM

如何利用Vue和Canvas创建逼真的天气动态背景引言:在现代网页设计中,动态背景效果是吸引用户眼球的重要元素之一。本文将介绍如何利用Vue和Canvas技术来创建一个逼真的天气动态背景效果。通过代码示例,你将学习如何编写Vue组件和利用Canvas绘制不同天气场景,从而实现一个独特而吸引人的背景效果。步骤一:创建Vue项目首先,我们需要创建一个Vue项目。

canvas特效有哪些canvas特效有哪些Aug 18, 2023 pm 04:12 PM

canvas特效有粒子效果、线条动画、图片处理、文字动画、音频可视化、3D效果、游戏开发等。详细介绍:1、粒子效果,通过控制粒子的位置、速度和颜色等属性来实现各种效果,如烟花、雨滴、星空等;2、线条动画,通过在画布上绘制连续的线条,创建出各种动态的线条效果;3、图片处理,通过对图片进行处理,可以实现各种炫酷的效果,如图片切换、图片特效等;4、文字动画等等特性。

canvas插件有哪些canvas插件有哪些Aug 17, 2023 pm 05:00 PM

canvas插件有Fabric.js、EaselJS、Konva.js、Three.js、Paper.js、Chart.js和Phaser。详细介绍:1、Fabric.js 是一个基于Canvas的开源 JavaScript 库,它提供了一些强大的功能;2、EaselJS是CreateJS库中的一个模块,它提供了一套简化了Canvas编程的API;3、Konva.js等等。

canvas引擎有哪些canvas引擎有哪些Aug 17, 2023 pm 05:29 PM

canvas引擎有Three.js、Pixi.js、EaselJS、Konva.js、Paper.js等。详细介绍:1、Pixi.js,提供了简单易用的API,支持精灵、纹理、滤镜等功能,同时还提供了丰富的工具和插件,方便开发者进行交互、动画和优化等操作;2、Pixi.js,提供了简单易用的API,支持精灵、纹理、滤镜等功能,还提供了丰富的工具和插件;3、EaselJS等等。

Vue和Canvas:如何实现图片的马赛克效果Vue和Canvas:如何实现图片的马赛克效果Jul 16, 2023 pm 10:17 PM

Vue和Canvas:如何实现图片的马赛克效果引言:随着Web技术的不断发展,越来越多的人开始使用Vue框架来构建交互式的前端应用。而在前端开发中,常常需要为用户提供图片处理的功能。本文将介绍如何利用Vue和Canvas实现图片的马赛克效果,为用户带来更好的视觉体验。一、马赛克效果概述马赛克效果是一种将图像的细节部分进行像素化处理,使得整个图像变得模糊和抽象

canvas框架有哪些canvas框架有哪些Aug 17, 2023 pm 04:42 PM

canvas框架有Fabric.js框架、Konva.js框架、EaselJS框架、Paper.js框架、Three.js框架等。详细介绍:1、Fabric.js框架,支持图形的选择、缩放、旋转、拖拽等操作,并且可以导出为图片或SVG格式;2、Konva.js框架,支持图形的层级管理、变换操作、事件监听等功能,适用于创建交互式的图形应用程序;3、EaselJS框架等等。

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脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

安全考试浏览器

安全考试浏览器

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

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)