您的当前位置:首页HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影

HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影

2023-11-26 来源:刁羽宠物网

上一篇文章我们了解了一些canvas基本图形绘制 下面我们再来看一些相关操作

坐标轴变换

我们画布中默认的坐标轴与浏览器坐标轴相同 x正半轴朝右 y正半轴朝下 但是我们可以手动设置画布坐标轴变换 首先还是会获取“画布”和“画笔”

<canvas id="myCanvas" width=500 height=500></canvas>
var canvas = document.getElementById('myCanvas'), ctx = canvas.getContext('2d');

先来在画布中画一个正方形

ctx.fillStyle = '#f40';ctx.fillRect(100, 100, 300, 300);

在图中我标记了画布的坐标轴

平移

使用translate(dx, dy)方法可以平移坐标轴 参数为x轴平移距离和y轴平移距离

ctx.translate(100, 100);ctx.fillStyle = '#f40';ctx.fillRect(100, 100, 300, 300);

缩放

使用scale(sx, sy)方法可以扩大坐标轴 参数为x轴和y轴的缩放因子 坐标也会等比缩放

ctx.scale(1.2, 1.2);ctx.fillStyle = '#f40';ctx.fillRect(100, 100, 300, 300);
旋转

使用rotate(deg)方法可以旋转坐标轴

ctx.rotate(Math.PI/12);ctx.fillStyle = '#f40';ctx.fillRect(100, 100, 300, 300);

保存与恢复

在改变坐标轴之前 我们使用save()可以保存之前的画布坐标轴 然后使用restore()可以让坐标轴恢复到之前的样子

ctx.save(); //保存之前的正常坐标轴ctx.rotate(Math.PI/12);ctx.fillStyle = '#f40';ctx.fillRect(100, 100, 300, 300);ctx.restore();//恢复到正常坐标轴ctx.fillStyle = '#000';ctx.fillRect(100, 100, 300, 300);

还有两个方法变换坐标轴了解即可 setTransform(a, b, c, d, e, f) 这个方法会重置坐标轴后再进行变换 transform(a, b, c, d, e, f) 这个方法是在之前坐标轴的基础上进行变换

这两个方法都是替换为变换矩阵 a c e b d f 0 0 1 和CSS3的图形变换类似 参数分别表示:水平缩放、水平倾斜、垂直倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动

图案填充

现在我先在页面中添加一个图片元素

<img src="./images/lamp.gif">

我们可以将这个图片填充到我们的画布中 使用createPattern(img/canvas/video, “repeat”/”no-repeat”/”repeat-x”/”repeat-y”)

var img = document.getElementsByTagName('img')[0];var pt = ctx.createPattern(img, 'repeat');ctx.fillStyle = pt;ctx.fillRect(0, 0, 500, 500);

它返回了CanvasPattern对象 定义了填充规则 除了img标签外,我们还可以填充canvas和video元素 使用方法是一样的

渐变

与CSS3中的渐变类似 canvas中的渐变也分为线性渐变和径向渐变 和图案填充的类似,需要定义我们的渐变规则

线性渐变

createLinearGradient(x1, y1, x2, y2) 表示定义从一点到另一点的线性渐变 返回一个CanvasGradient()对象 上面有addColorStop()用来定义我们的渐变色 0就是起始点,1是终点

var lGradient = ctx.createLinearGradient(0, 0, 0, 250);lGradient.addColorStop(0, '#000');lGradient.addColorStop(1, '#fff');ctx.fillStyle = lGradient;ctx.fillRect(0, 0, 500, 250);

注意定义的渐变必须要在渐变区域里才能够显示

径向渐变

createRadialGradient(x1, y1, r1, x2, y2, r2) 相比线性渐变,多了两个点的半径参数 除此之外使用方法和上面是一样的 就不多做解释了 比如说我们可以绘制一个渐变同心圆

var rGradient = ctx.createRadialGradient(250, 250, 100, 250, 250, 250);rGradient.addColorStop(0, '#fff');rGradient.addColorStop(0.5, '#000');rGradient.addColorStop(1, '#fff');ctx.fillStyle = rGradient;ctx.fillRect(0, 0, 500, 500);

阴影

类比于CSS3中的box-shadow属性 在canvas中我们使用 shadowColor 定义阴影颜色 shadowOffsetX/Y 控制阴影偏移量 shadowBlur 定义阴影模糊半径 要注意的是 阴影的偏移量不受坐标系变换影响

ctx.shadowColor = '#000';ctx.shadowOffsetX = 30;ctx.shadowOffsetY = 30;ctx.shadowBlur = 30;ctx.fillStyle= '#f40';ctx.fillRect(100, 100, 300, 300);

设置阴影相关属性后才可以使用fillRect绘制带阴影的矩形

小编还为您整理了以下内容,可能对您也有帮助:

如何用HTML5 CANVAS绘制阴影和填充模式


绘制阴影
我们可以在HTML5 canvas上绘制出图形或文字的阴影效果。canvas的阴影效果非常简单,通过一些简单的设置,就可以自动在图片或文字下面生成相应的阴影。下面是一个简单的例子:
在canvas中,图形的阴影由2D上下文的4个属性来控制:
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
shadowOffsetX和shadowOffsetY属性阴影和图形之间的距离。正数值表示阴影绘制在图形的右边(X轴方向),或图形的下方(Y轴方向)。而负数值表示阴影绘制在图形的左边(X轴方向),或图形的上方(Y轴方向)。它们的默认值都是0。
shadowBlur属性用于设置阴影的模糊效果。数值越大,阴影越模糊。数值越小,用于越清晰。它的值是一个浮点数,0表示阴影不模糊。
shadowColor表示阴影的颜色。
上面例子的实现代码如下:
var canvas = document.getElementById(ex1);
var context = canvas.getContext(2d);
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
context.shadowColor = #666666; //or use rgb(red, green, blue)
context.fillStyle = #000000;
context.fillRect(10,10, 50, 50);
context.fillStyle = #000066;
context.font = 30px Arial;
context.fillText(HTML5 Canvas Shadow, 10,120);
填充模式
填充模式是指在canvas中使用某张图片作为一种模式来填充图形。我们可以通过createPattern()方法来创建一种填充模式。它的语法为:createPattern(image, type)。
参数image可以是一个HTML图片元素,另一个canvas或一个元素等。
参数type表示如何使用图片来创建特定的模式。它的取值可以是:
repeat:在水平和垂直方向上重复图片。
repeat-x:只在水平方向上重复图片。
repeat-y:只在垂直方向上重复图片。
no-repeat:不重复图片,只显示一次。
下面是一个使用填充模式的简单例子:
var ctx = document.getElementById(canvas).getContext(2d);
// create new image object to use as pattern
var img = new Image();
img.src = Canvas_createpattern.png;
img.onload = function(){
// create pattern
var ptrn = ctx.createPattern(img,repeat);
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,150,150)
我们在模式中使用的图片如下:
上面代码的返回结果如下:

如何用HTML5 CANVAS绘制阴影和填充模式


绘制阴影
我们可以在HTML5 canvas上绘制出图形或文字的阴影效果。canvas的阴影效果非常简单,通过一些简单的设置,就可以自动在图片或文字下面生成相应的阴影。下面是一个简单的例子:
在canvas中,图形的阴影由2D上下文的4个属性来控制:
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
shadowOffsetX和shadowOffsetY属性阴影和图形之间的距离。正数值表示阴影绘制在图形的右边(X轴方向),或图形的下方(Y轴方向)。而负数值表示阴影绘制在图形的左边(X轴方向),或图形的上方(Y轴方向)。它们的默认值都是0。
shadowBlur属性用于设置阴影的模糊效果。数值越大,阴影越模糊。数值越小,用于越清晰。它的值是一个浮点数,0表示阴影不模糊。
shadowColor表示阴影的颜色。
上面例子的实现代码如下:
var canvas = document.getElementById(ex1);
var context = canvas.getContext(2d);
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
context.shadowColor = #666666; //or use rgb(red, green, blue)
context.fillStyle = #000000;
context.fillRect(10,10, 50, 50);
context.fillStyle = #000066;
context.font = 30px Arial;
context.fillText(HTML5 Canvas Shadow, 10,120);
填充模式
填充模式是指在canvas中使用某张图片作为一种模式来填充图形。我们可以通过createPattern()方法来创建一种填充模式。它的语法为:createPattern(image, type)。
参数image可以是一个HTML图片元素,另一个canvas或一个元素等。
参数type表示如何使用图片来创建特定的模式。它的取值可以是:
repeat:在水平和垂直方向上重复图片。
repeat-x:只在水平方向上重复图片。
repeat-y:只在垂直方向上重复图片。
no-repeat:不重复图片,只显示一次。
下面是一个使用填充模式的简单例子:
var ctx = document.getElementById(canvas).getContext(2d);
// create new image object to use as pattern
var img = new Image();
img.src = Canvas_createpattern.png;
img.onload = function(){
// create pattern
var ptrn = ctx.createPattern(img,repeat);
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,150,150)
我们在模式中使用的图片如下:
上面代码的返回结果如下:

如何使用HTML5 CANVAS绘制渐变色

HTML5 Canvas渐变是一种用于填充或描边图形的颜色模式。渐变色是由不同的颜色进行过渡,而不是单一的颜色。先来看几个canvas渐变色的例子:

渐变按照类型来分可以分为两种类型:

线性渐变

径向渐变

线性渐变以线性的模式来改变颜色,也就是水平,垂直或对角方向。

径向渐变以圆形模式来改变颜色,颜色以圆形的中心向外辐射。

线性渐变

正如前面所说,线性渐变以线性的模式来改变颜色。我们可以通过2D上下文的createLinearGradient()方法来创建一个线性渐变。下面是一个例子:

var canvas = document.getElementById(ex1);

var context = canvas.getContext(2d);

var x1 = 0;

var y1 = 0;

var x2 = 100;

var y2 = 0;

var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);

createLinearGradient()函数有4个参数:x1,y1,x2和y2。这4个参数决定渐变的方向和距离。线性渐变会从第一个点(x1,y1)扩展到第二个点(x2,y2)。

水平的线性渐变仅仅是水平方向的参数值(x1和x2)不同,例如:

var x1 = 0;

var y1 = 0;

var x2 = 100;

var y2 = 0;

var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);

垂直的线性渐变仅仅是垂直方向的参数值(y1和y2)不同,例如:

var x1 = 0;

var y1 = 0;

var x2 = 0;

var y2 = 100;

var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);

一个对角线的线性渐变水平和垂直方向上的参数都不相同,例如:

var x1 = 0;

var y1 = 0;

var x2 = 100;

var y2 = 100;

var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);

颜色停止点(Color Stops)

在上面的例子中,并没有指明线性渐变使用什么颜色。为了指明使用什么渐变颜色,可以在渐变对象上使用addColorStop()方法来指定。例如:

var linearGradient1 = context.createLinearGradient(0,0,100,0);

linearGradient1.addColorStop(0, rgb(255, 0, 0));

linearGradient1.addColorStop(1, rgb( 0, 0, 0));

addColorStop()方法有两个参数。第一个参数是0-1之间的一个数值,这个数值指定该颜色进入渐变多长的距离,第二个参数是颜色值,例子中使用的是rgb()颜色值。

在上面的例子中为渐变添加了两种颜色。第一种颜色是红色,设置在渐变的开始处。第二种颜色是黑色,设置在渐变的结束处。

你可以添加通过addColorStop()函数来添加更多的颜色。例如下面的例子添加了三种颜色:

var linearGradient1 = context.createLinearGradient(0,0,100,0);

linearGradient1.addColorStop(0 , rgb(255, 0, 0));

linearGradient1.addColorStop(0.5, rgb( 0, 0, 255);

linearGradient1.addColorStop(1 , rgb( 0, 0, 0));

复制代码

上面的代码在渐变的中间添加了一个蓝色。整个渐变将平滑的从红色过渡到蓝色,在过渡到黑色。

使用渐变来填充和描边图形

你可以使用渐变来填充或描边图形。要填充或描边图形可以通过2D上下文的fillStyle或strokeStyle属性来完成。下面是一个示例代码:

var linearGradient1 = context.createLinearGradient(0,0,100,0);

linearGradient1.addColorStop(0 , rgb(255, 0, 0));

linearGradient1.addColorStop(0.5, rgb( 0, 0, 255);

linearGradient1.addColorStop(1 , rgb( 0, 0, 0));

context.fillStyle = linearGradient1;

context.strokeStyle = linearGradient1;

#p#副标题#e#

通过fillStyle或strokeStyle属性来指向渐变对象即可完成渐变的填充或描边。

现在我们可以为图形填充渐变色或描边渐变色。下面是一个例子,一个矩形的填充渐变色和一个矩形的描边渐变色。

var canvas = document.getElementById(ex2);

var context = canvas.getContext(2d);

var linearGradient1 = context.createLinearGradient(0,0,100,0);

linearGradient1.addColorStop(0 , rgb(246, 36, 89));

linearGradient1.addColorStop(0.5, rgb( 31, 58, 147));

linearGradient1.addColorStop(1 , rgb( 34, 49, 63));

context.fillStyle = linearGradient1;

context.fillRect(10,10,100, 100);

var linearGradient2 = context.createLinearGradient(125,0, 225,0);

linearGradient2.addColorStop(0 , rgb(255, 0, 0));

linearGradient2.addColorStop(0.5, rgb( 0, 0, 255));

linearGradient2.addColorStop(1 , rgb( 0, 0, 0));

context.strokeStyle = linearGradient2;

context.strokeRect(125, 10, 100, 100);

渐变的长度

我们在使用渐变的时候要非常明白的知道渐变的长度的概念。如果我们设置渐变从x=10扩展到x=110的距离,那么渐变只会作用在水平方向上从10到110的距离的范围内。超出这个范围的图形将任然受渐变色的影响,但是在这个范围之外的颜色只会是渐变的开始或结束颜色。

距离来说,加入有一个水平线性渐变,x1=150,x2=350。渐变从蓝色过渡到绿色。那么所有水平方向定位x值小于150的图形都会使用蓝色蓝填充。所有水平方向定位x值大于350的图形都会使用绿色来填充。只有那些在水平方向定位x值在150到350之间的图形会使用蓝绿渐变色来填充。

具体来看下面的代码,这里绘制了5个矩形,并用上面所说的渐变来填充它们,让我们来看看效果:

var linearGradient1 = context.createLinearGradient(150, 0, 350,0);

linearGradient1.addColorStop(0, rgb(0, 0, 255));

linearGradient1.addColorStop(1, rgb(0, 255, 0));

context.fillStyle = linearGradient1;

context.fillRect(10,10,130, 100);

context.fillRect(150,10, 200, 100);

context.fillRect(360,10, 130, 100);

context.fillRect(100,120, 150, 100);

context.fillRect(280,120, 150, 100);

从上面的结果可以看出,在渐变区域之外的图形仅会使用开始或结束颜色来填充。

渐变长度是非常重要的概念,需要大家仔细体会。只有掌握它才能在使用渐变是获得正确的结果。

径向渐变

径向渐变是一种圆形的颜色扩展模式,颜色从圆心位置开始向外辐射。下面是一个例子:

一个径向渐变于两个圆形来定义。每一个圆都有一个圆心和一条半径。下面是示例代码:

var x1 = 100; // 第一个圆圆心的X坐标

var y1 = 100; // 第一个圆圆心的Y坐标

var r1 = 30; // 第一个圆的半径

var x2 = 100; // 第二个圆圆心的X坐标

var y2 = 100; // 第二个圆圆心的Y坐标

var r2 = 100; // 第二个圆的半径

var radialGradient1 =

context.createRadialGradient(x1, y1, r1, x2, y2, r2);

radialGradient1.addColorStop(0, rgb(0, 0, 255));

radialGradient1.addColorStop(1, rgb(0, 255, 0));

context.fillStyle = radialGradient1;

context.fillRect(10,10, 200, 200);

如上面的代码所示,这里有两个圆,圆心分别为x1,y1和x2,y2,它们的半径分别为r1和r2,这些值将作为参数传入到2D上下文的createRadialGradient()方法中。

这两个圆必须设置不同的半径,形成一个内圆和一个外圆。这样渐变色就从一个圆形辐射到另一个圆形。

颜色停止点会被添加到这两个圆形之间,例如上面的代码中,第一个颜色停止点中的参数0表示该颜色从第一个圆形开始,第二个颜色停止点中的参数1表示第二种颜色从第二个圆形开始。

下面是上面代码的返回结果:

如果两个圆形的圆心位置相同,那么径向渐变将是一个完整的圆形。如果两个圆的圆心位置不相同,那么径向渐变看起来就像是一个探照灯发出的光线。例如下面的样子:

var x1 = 100;

var y1 = 100;

var r1 = 30;

var x2 = 150;

var y2 = 125;

var r2 = 100;

var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2);

radialGradient1.addColorStop(0, rgb(0, 0, 255));

radialGradient1.addColorStop(1, rgb(0, 255, 0));

context.fillStyle = radialGradient1;

context.fillRect(10,10, 200, 200);

得到的结构如下所示:

canvas画布画好的图形,怎么在图形中填充渐变颜色,急求!!

<canvas id=myCanvas1 width=500px height=500px></canvas>

<script>

var myCanvas = document.getElementById("myCanvas1");

var context = myCanvas.getContext("2d");

//颜色渐变

var canvasGra = context.createLinearGradient(0,0,0,500);

canvasGra.addColorStop(0,"rgba(255,0,0,0.2)");

canvasGra.addColorStop(0.25,"rgba(0,255,0,0.2)");

canvasGra.addColorStop(0.5,"rgba(0,0,255,0.2)");

canvasGra.addColorStop(0.75,"rgba(0,255,255,0.2)");

canvasGra.addColorStop(1,"rgba(255,255,255,0.2)");

context.fillStyle =canvasGra;//样式,颜色渐变

context.beginPath();

context.fillRect(0,0,500,500);

context.fill();

</script>

刁羽宠物网还为您提供以下相关内容希望对您有帮助:

如何用HTML5 CANVAS绘制阴影和填充模式

下面是一个简单的例子:在canvas中,图形的阴影由2D上下文的4个属性来控制:shadowOffsetXshadowOffsetYshadowBlurshadowColorshadowOffsetX和shadowOffsetY属性阴影和图形之间的距离。正数值表示阴影绘制在图形的右边(X轴方向),或...

如何使用HTML5 CANVAS绘制渐变色

HTML5 Canvas渐变是一种用于填充或描边图形的颜色模式。渐变色是由不同的颜色进行过渡,而不是单一的颜色。先来看几个canvas渐变色的例子:渐变按照类型来分可以分为两种类型:线性渐变径向渐变线性渐变以线性的模式来改变颜色,...

如何在 HTML5 画布上绘图

第一个数字表示 x 轴坐标,或者表示此坐标定义的自画布左侧算起的像素数。第二个数字是从顶部开始测量的 y 轴坐标。 // Draw a line that starts at the upper left corner of the canvas and ends at the lower right. myCont...

如何用Canvas绘制多种图形

英文中 Canvas 的意思是“画布”,不过这里说的 Canvas 是 HTML5 中新出的一个元素,开发者可以在上面绘制一系列图形。Canvas 在 HTML 文件中的写法很简单:&lt;canvas id="canvas" width="宽度" height="高度"&gt;&lt;/canvas&gt;其中id 属性...

关于html5的canvas的坐标问题

就你这部分代码运行应该是没问题的,你再试试?

如何使用html5中的canvas标签,画一个圆及一个矩形

Cavas的英文解释是画布,使用这个Html5的Canvas标签可以创建画布,结合JavaScript可以画出很多图形,我们先以画一个蓝色矩形为例,说明一下这个标签的使用方法,首先需要建立一个HTML5的网页,方法是:进入DW后,选择:文件--&gt;...

HTML5 Canvas基本绘制线条教程

记住,这里是以canvas画布的左上角为笛卡尔坐标系的原点,且y轴的正方向向下,x轴的正方向向右。2.笔画停点(lineTo())同理,context.lineTo(600,600)。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚...

HTML5的canvas绘图和CSS3的绘图哪个更有优越性

Canvas更像是用一支笔画图,不过画出来的图更加像能够控制大小的矢量图片。下图简单说明 在面对曲线和更复杂图形的时候,Canvas比CSS更有办法。另外Canvas确定坐标位置的时候更加贴近我们常用到的数学思维方法。只能显浅说说。

如何使用HTML5的Canvas图形元素绘制图形

//绘制背景的颜色 context.strokeStyle = "#fff";//绘制边框的颜色 context.lineWidth = 5; //设置画笔宽度 context.fillRect(0, 0, 400, 300);//绘制 context.strokeRect(50, 50, 180, 120);} ...

HTML5用canvas怎么实现动画效果

使用HTML5画布canvas能够快速实现简单的动画效果,基本原理如下:每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形 首先是绘制图形的方法,如下:fu...

Top