HTML5中Canvas元素的使用总结

Stella981
• 阅读 664

HTML5中Canvas元素的使用总结

    Canvas提供了开发者自定义绘图的接口,我们可以公国getContext()函数来获取绘图上下文进行绘制操作,这个函数中可以传入两个参数,其中第1个参数设置绘图上下文的类型,比较常用的是"2d",我们也可以使用"webgl"来使用webOpenGL实现3D绘制。本篇博客主要总结2d绘制的相关方法。

1.进行简单的图形绘制

    使用Canvas进行平面图形绘制比较简单。例如使用如下函数则可以直接绘制一个矩形区域。

        var c = document.getElementById("canvas");
        var context = c.getContext("2d");
        context.strokeRect(20,20,100,100);

图形效果如下:

HTML5中Canvas元素的使用总结

与strokeRect对应,使用fillRect可以绘制填充矩形,例如:

        var c = document.getElementById("canvas");
        var context = c.getContext("2d");
        context.fillRect(20,20,100,100);

效果如下:

HTML5中Canvas元素的使用总结

使用clearRect函数可以进行矩形区域的擦除,示例如下:

        var c = document.getElementById("canvas");
        var context = c.getContext("2d");
        context.strokeRect(20,20,100,100);
        context.clearRect(10,10,100,100);

效果如下图:

HTML5中Canvas元素的使用总结

上面的绘制图形的方法实际上是一个复合的函数,其完成了路径的定义和绘制两步。我们也可以自定义图形路径,例如:

        var c = document.getElementById("canvas");
        var context = c.getContext("2d");
        context.beginPath();
        context.moveTo(20,20);
        context.lineTo(20,100);
        context.lineTo(100,100);
        context.closePath();
        context.stroke();

效果如下:

HTML5中Canvas元素的使用总结

beginPath函数用来开启一个路径,moveTo函数用于将画笔移动到某个点,lineTo函数用来定义一条线,线的起点为当前画笔所在位置,参数为终点位置。closePath函数用来关闭路径,当然,此函数并非一定要调用,如果不调用可以绘制非闭合的图形。stroke函数用来将已经定义的图形进行绘制,与其对应还有一个fill函数用来进行填充绘制。

    quadraticCurveTo与bezierCurveTo两个函数分别用来创建二次与三次贝塞尔曲线路径,示例如下:

        context.moveTo(20,120);
        context.quadraticCurveTo(20,200,100,180);
        context.stroke();
        context.moveTo(20,200);
        context.bezierCurveTo(20,300,60,300,60,200);
        context.stroke();

效果如下图:

HTML5中Canvas元素的使用总结

关于贝塞尔曲线的相关内容,可以查阅下面的博客:

https://my.oschina.net/u/2340880/blog/1519503

arc函数用来创建圆形弧线,例如:

        context.moveTo(110,350);
        context.arc(60,350,50,0,2*Math.PI,false);
        context.stroke();

arc函数中,前两个个参数设置圆心点,第3个参数设置半径,第4个和第5个参数设置圆弧的起始点和结束点,以弧度制表示,最后一个参数为布尔值,设置是否逆向绘制。还有一个arcTo函数用来绘制两条切线间的圆弧,如下:

        context.moveTo(20,420);
        context.arcTo(80,420,80,600,50);
        context.stroke();

效果如下图所示:

HTML5中Canvas元素的使用总结

使用clip函数可以进行裁剪操作,裁剪之后,之后的绘制只能绘制在裁剪的区域内,例如:

        context.rect(0,500,100,30);
        context.clip();
        context.fillRect(0,500,200,200);

效果如下:

HTML5中Canvas元素的使用总结

有一点需要注意,使用clip函数进行裁剪后,之后的绘制将只能在裁剪的区域内进行绘制,如果想在裁剪区域外绘制,需要使用save和restore两个函数来处理,在裁剪前,使用save函数来保存当前绘图上下文的状态,想要在裁剪区域外绘制时使用restore函数来还原绘图上下文。

2.绘制文本和图像

    前面示例了使用Canvas进行图形的绘制,除了图形,使用Canvas也可以轻松的绘制出图像与文本。使用drawImage函数进行图像的绘制,如下:

        var image = document.createElement("img");
        image.src = 'img/HBuilder.png';
        image.onload = function(){
                context.drawImage(image,0,600);
        }

需要注意,上面创建了img元素后,设置src属性后不能立刻进行渲染,因为图片的加载是需要时间的,直接渲染会无法获取图像数据。drawImage这个函数总共可以有8个参数,drawImage(img,sx,sy,sw,sh,x,y,w,h)。其中sx,sy和sw,sh用来对原图像进行裁剪,只选择图像中的部分进行绘制,x,y,w,h设置绘制在画布上的坐标和尺寸。

    关于文本绘制,可以使用fillText或strokeText函数,分别用来绘制实心和空心文字。示例如下:

        context.font = "20px Georgia";//设置字体
         context.textAlign = 'start';  //设置文字对齐方式
        context.fillText("Hello World",0,750,200);
        context.strokeText("Hello World",0,800,200);

效果如下:

HTML5中Canvas元素的使用总结

3.绘制属性的设置

    在绘制过程中,开发者可以对绘制的线条颜色,填充颜色,风格,阴影等进行设置。示例如下:

        context.fillStyle = 'red';  //设置填充颜色
        context.strokeStyle = 'blue'; //设置线条颜色
        context.shadowColor = 'green'; //设置阴影颜色
        context.shadowBlur = 10;   //设置阴影模糊度
        context.shadowOffsetX = 10; //设置阴影X轴偏移量
        context.shadowOffsetY = 5;  //设置阴影Y轴偏移量
        context.lineCap = 'round';  //设置线帽样式
        context.lineJoin = 'round'; //设置折点样式
        context.lineWidth = 1; //设置线条宽度

效果如下图:

HTML5中Canvas元素的使用总结

关于fillStyle和strokeStyle两个属性比较特殊,从名字也可以了解其是设置填充或线条的风格,设置颜色只是一种方式,其还可以设置为一个渐变对象,用来实现渐变效果。例如:

        var g = context.createLinearGradient(0,750,200,750);
        g.addColorStop(0,'black');
        g.addColorStop(0.5,'red');
        context.fillStyle =  g;
        context.fillText("Hello World",0,750,200);

效果入下图:

HTML5中Canvas元素的使用总结

createLinearGradient函数用来创建线性渐变层,其中4个参数设置起始点的x,y和结束点的x,y。调用addColorStop函数用来想渐变层中添加临界点和颜色值。也可以创建发散型渐变,例如:

        var g = context.createRadialGradient(70,800,20,70,800,50);
        g.addColorStop(0,'black');
        g.addColorStop(1,'red');
        context.fillStyle =  g;
        context.fillRect(20,750,100,100);

效果如下:

HTML5中Canvas元素的使用总结

createRadiaGradient函数的前3个参数设置渐变开始处的圆弧(分别设置圆心x,y坐标和半径),后3个参数设置渐变结束处的圆弧(分别设置圆心x,y坐标和半径)。

    fillStyle和strokeStyle也可以设置为一个模式背景,例如将图片进行重复得到的背景,示例如下:

        image.onload = function(){
            var p = context.createPattern(image,'repeat');
            context.fillStyle =  p;
            context.fillRect(20,750,200,200);
        }

效果如下图所示:

HTML5中Canvas元素的使用总结

可选的重复模式还有:

repeat-x:只在水平方向重复。

repeat-y:只在竖直方向重复。

no-repeat:不重复,只显示一次。

4.进行画布转换

    画布也可以进行一些简单的变换操作,例如旋转,缩放等等。需要注意,对画布的操作不会影响到已经绘制到画布上的内容,之后绘制的内容会受到影响。使用scale(x,y)函数可以对画布进行缩放,其中两个参数x和y分别设置水平和竖直方向的缩放比例。rotate(angle)函数用来对画布进行旋转,其中的参数为旋转的角度值。translate(x,y)函数用来对画布进行平移,参数x,y分别设置水平和竖直方向的平移量。还有一个复合的transform(a,b,c,d,e,f)函数,使用这个函数可以一步设置平移,旋转和缩放属性,参数意义如下:

a:设置水平缩放比

b:设置水平倾斜

c:设置垂直倾斜

d:设置垂直缩放比

e:设置水平平移

f:设置垂直平移

需要注意,如果你多次调用transform,每次的transform变换都将在上一次的基础上进行。如果你不想保留上一次的记录,可以调用setTransform()函数来重置设置。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Python进阶者 Python进阶者
2年前
手把手教你使用CanvasAPI打造一款拼图游戏
一、canvas简介1.canvas是HTML5提供的一种新标签,双标签;2.HTML5 canvas标签元素用于图形的绘制,通过脚本(通常是JavaScript)来完成;3.canvas标签只是图形容器,必须使用脚本来绘制图形;Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画;二、案例目标我们今天的目标是使用HTML5
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Python进阶者 Python进阶者
2年前
Canvas之鼠标滑动特效
大家好,我是皮皮。我们会看到很多网页的粒子特效;如上图所示,这些都是借助HTML新特性,使用新增标签Canvas得到的效果;那么我们来了解下canvas。什么是Canvas在MDN中是这样定义  的: 是HTML5新增的元素,可用于通过使用JavaScript中的脚本来绘制图形。例如,它可以用于绘制图形、制作照片、创建动画,甚至可以进行实时
Stella981 Stella981
2年前
H5中canvas和svg绘图方式介绍
在HTML5中包括了两种绘图方式,canvas和svg(矢量呈现),而与canvas不同的是,svg是一种XML标记语言,它既可以单独保存以“.svg”为后缀的文件在浏览器中打开显示,也支持建立svg标签直接嵌入在网页中显示,还可以通过<embedsrc"文件.svg"name"name自命"type"image/svgxml"height
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
HTML5实现绘制几何图形
HTML5新增了一个<canvas.../属性。该元素自身并不绘制图形,只是相当于一张空画布。如果开发者需要向<canvas.../上绘制图形则必须使用JavaScript脚本进行绘制。为了向<canvas.../元素上绘图,必须经过如下3步。获取<canvas.../元素对应的DOM对象,这是一个Canvas对象。调用Canvas对象
Stella981 Stella981
2年前
HTML5 & CSS3 初学者指南(4) – Canvas使用
介绍传统的HTML主要用于文本的创建,可以通过<img标签插入图像,动画的实现则需要第三方插件。在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力。HTML5的到来,带来了新的成员<canvas标签。什么是Canvas?HTML5的Canvas 元素使用JavaScript在网页上绘制图像。
Python进阶者 Python进阶者
4个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这