详述canvas(三)—绘制图形/填充和渐变

未闭合的图形也会被填充

<body>
    <canvas id = "palette" width="500px" height="500px">
        您的浏览器不支持canvas标签，请升级浏览器或更换其它浏览器
    </canvas>
</body>
</html>
<script>
    var palette = document.querySelector("#palette").getContext("2d");//设置绘图环境
    palette.moveTo(200,200);
    palette.arc(200,200,50,0,Math.PI,false);
    palette.fill();
    palette.strokeStyle = "#FF0000";
    palette.lineWidth = 5;
    palette.stroke();
</script>

这里，我们使用arc(x,y,r,startAngle,endAngle,false);来绘制一个半圆。并填充,可以看到半圆仍然会被填充,但是描边有一段是没有线的。

之前曾提到closePath()是用来闭合路径的,如果我们在palette.fill()之前,先调用一下palette.closePath()呢？的确如我们所想,半圆会闭合。如下所示:

arc用来绘制圆,除此以外,我们可以使用fillRect(x,y,w,h)来绘制实心矩形,使用strokeRect(x,y,w,h)来绘制空心矩形。

<body>
    <canvas id = "palette" width="300px" height="300px" style="border: 1px solid red;">
        您的浏览器不支持canvas标签，请升级浏览器或更换其它浏览器
    </canvas>
</body>
</html>
<script>
    var palette = document.querySelector("#palette").getContext("2d");
    palette.fillStyle = "#84FF82";
    palette.fillRect(100,100,100,100);
</script>

之前,曾用strokeStyle来修改描线的颜色,同理,使用fillStyle来改变填充的颜色。

背景色可以使用渐变,那么canvas的填充颜色能不能使用渐变色呢？答案是可以的。

canvas支持线性渐变和径向渐变。

createLinearGradient(x1,y1,x2,y2);

x1,y1是起始坐标点,x2,y2是结束坐标点

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

x1,y1,r1内圆坐标及半径

x2,y2,r2外圆坐标及半径

使用渐变填充的第一步先创建渐变,先以线性渐变为例。

var linear = palette.createLinearGradient(100,100,200,100);

线性渐变创建好了,但是此时的渐变是空的,我们需要使用addColorStop(position,color)向其中填充颜色,需要注意的是,这个颜色是保存在linear上的,而不是加在画笔上,即palette。

linear.addColorStop(0,"#D5FF92");
linear.addColorStop(0.5,"#FF00AE");
linear.addColorStop(1,"#3B31FF");

addColorStop(位置,颜色)可以加多个,但是位置必须是0-1之间的数字,可以是两位小数,表示百分比。

定义好渐变之后,我们只需要将其赋值给fillStyle,在用来填充即可。

palette.fillStyle = linear;

代码如下:

<body>
<canvas id = "palette" width="500px" height="500px">
    您的浏览器不支持canvas标签，请升级浏览器或更换其它浏览器
</canvas>
</body>
</html>
<script>
    var palette = document.querySelector("#palette").getContext("2d");//设置绘图环境
    var linear = palette.createLinearGradient(100,100,200,100);
    linear.addColorStop(0,"#D5FF92");
    linear.addColorStop(0.5,"#FF00AE");
    linear.addColorStop(1,"#3B31FF");
    palette.fillStyle = linear;
    palette.fillRect(0,0,300,300);
</script>

我们的渐变是从(100,100)到(200,100),可以看到,在渐变起点之前,颜色是起点色,而在渐变终点之后,颜色都是终点色。

上面创建的是一个水平渐变,实际上,我们也可以创建倾斜的渐变,如下:

<body>
<canvas id = "palette" width="500px" height="500px">
    您的浏览器不支持canvas标签，请升级浏览器或更换其它浏览器
</canvas>
</body>
</html>
<script>
    var palette = document.querySelector("#palette").getContext("2d");//设置绘图环境
  var linear = palette.createLinearGradient(100,100,300,300);
    linear.addColorStop(0.1,"#D5FF92");
    linear.addColorStop(0.3,"#FF00AE");
    linear.addColorStop(0.8,"#FFDD00");
    linear.addColorStop(1,"#3B31FF");
    palette.fillStyle = linear;
    palette.fillRect(100,100,300,300);
</script>

如果我们希望在超过终点之后,不显示颜色,可以在终点增加一个透明的颜色。

现在,再尝试一下径向渐变,在绘制太阳系时,我们也需要用到径向渐变.

我们先从最简单的做起。首先，做一个很正规的径向渐变，即渐变圆形的圆心就是渐变的起点。由于正规的径向渐变，中心即圆心，所以我们应该尽量避免发生偏斜。我们把终点圆的圆心与起点圆的圆心重合

var radial = palette.createRadialGradient(100,100,50,100,100,200);

创建径向渐变

向径向渐变添加颜色

radial.addColorStop(0,"#ff0000");
radial.addColorStop(0.3,"#FFDD00");
radial.addColorStop(0.5,"#FF36DA");
radial.addColorStop(0.8,"#1A16FF");
radial.addColorStop(1,"#3CFF63");

<body>
    <canvas id = "palette" width="500px" height="500px">
        您的浏览器不支持canvas标签，请升级浏览器或更换其它浏览器
    </canvas>
</body>
</html>
<script>
    var palette = document.querySelector("#palette").getContext("2d");
    var radial = palette.createRadialGradient(200,200,10,200,200,100);
    radial.addColorStop(0,"#ff0000");
    radial.addColorStop(0.3,"#FFDD00");
    radial.addColorStop(0.5,"#FF36DA");
    radial.addColorStop(0.8,"#1A16FF");
    radial.addColorStop(1,"#3CFF63");
    palette.fillStyle = radial;
    palette.fillRect(50,50,300,300);
</script>

可以看到,径向渐变区域之外,都是结束颜色,如果我们希望其颜色为透明色,只需要在0.99处增加颜色,再将1处的颜色设为透明色。

canvas中径向渐变的起点色，是从起点圆的范围之外绘制的，而起点圆的整个颜色都是起点色。

如果我们将起点圆的半径设为0,那么径向渐变的”变心”就变成了一个点.

上面,我们是将起点圆和终点圆的圆心重合,但是显然,我们也可以让他们偏离,看下效果如何:

<body>
<canvas id = "palette" width="500px" height="500px">
    您的浏览器不支持canvas标签，请升级浏览器或更换其它浏览器
</canvas>
</body>
</html>
<script>
    var palette = document.querySelector("#palette").getContext("2d");
    var radial = palette.createRadialGradient(250,250,0,200,200,100);
    radial.addColorStop(0,"#ff0000");
    radial.addColorStop(0.2,"#FFDD00");
    radial.addColorStop(0.8,"#1A16FF");
    radial.addColorStop(0.99,"#3CFF63");
    radial.addColorStop(1,"rgba(0,0,0,0)");
    palette.fillStyle = radial;
    palette.fillRect(50,50,300,300);
</script>

时间： 2024-08-04 06:32:51

详述canvas(三)—绘制图形/填充和渐变的相关文章

HTML5使用Canvas来绘制图形

一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘制图形. 3.可以通过多种方法通过Canvas绘制路径.盒.圆.字符以及添加图像. 二.Canvas绘制图形 1.绘制矩形 2.绘制圆形 3.moveTo和lineTo 4.使用bezierCurveTo绘制贝塞尔曲线 5.绘制线性渐变 6.绘制径向渐变 7.绘制变形图形 8.绘制图形合成gloablComp

canvas基本绘制图形

canvas H5新增的元素,提供了强大的图形的绘制,变换,图片,视频的处理等等.需要使用JavaScript脚本操作浏览器支持大多数的现代浏览器都可以支持:IE8以下的浏览器不支持画布可支持设置宽高,默认宽高300 150 获取canvas元素 var mycanvas = document.getElementById("myCanvas"); 获取绘制环境(相当于画笔) var context = mycanvas.getContext("2d");

使用canvas来绘制图形

一个简单例子一开始,让我们来看个简单的例子,我们绘制了两个有趣的长方形,其中的一个有着alpha透明度. 我们将在接下来的例子里深入探索一下这是如何工作的. <html> <head> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getCont

[Canvas学习]绘制图形

学习目的:在Canvas上绘制矩形,三角形,直线,圆弧,曲线栅格栅格canvas grid,canvas元素默认被网格覆盖,栅格的起点是左上角坐标(0,0),元素的位置都是相对于栅格起点来定位的. 绘制矩形 API提供了三种方法绘制矩形 fillRect(x, y, width, height) 绘制填充的矩形 strokeRect(x, y, width, height) 绘制矩形边框 clearRect(x, y, width, height) 清除指定矩形区域变的完全透明 rect(x

[转]html5 Canvas画图4：填充和渐变

一般绘图的方式有两种,即填充和描边,前面的文章已经讲了描边的方法stroke,本文就讲一下Canvas中填充图形的方法. 填充即fill(),很直白吧?而且和strokeStyle表示描边样式一样,fillStyle即表示填充样式. ctx.fillStyle = '颜色';默认的填充样式是不透明的黑色提问:未闭合的路径可以填充吗? 可以.Canvas会从你当前路径的终点直接连接到起点,然后填充.如图: 但你可以发现,最后一段没有描边. 记得我们前一篇文章用4条线画了一个正方形,但canvas

详述Canvas(五)/绘制圆角矩形

Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现. 我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处,然后acrTo(x+w,y,x+w,y+h,r),对于终点,其实只要y值大于绿色点的都是可以的(这部分在绘制曲线部分已经详述).此处我们将终点设为(x+w,y+h);这就是第一段曲线.第一段曲线绘制完毕之后,画笔落在了下图绿色点的位置. 现在再看下第二段曲线: 因此我们

详述Canvas(四)/绘制曲线

Canvas提供了4个绘制曲线的方法: arc(x,y,stratAngle,endAngle,true/false);//默认为false arcTo(x1,y1,x2,y2,r); x1,y2坐标一,x2,y2坐标2,r是圆弧半径 quadraticCurveTo(dx,dy,x,y); dx,dy控制点,x,y是结束点 bezierCurveTo(dx1,dy1,dx2,dy2,x,y); dx1,dy1是控制点一,dx2,dy2是控制点二,x,y是结束点 1.arc(x,y,startA

微信小程序开发—(八)canvas绘制图形

一.小知识 (1).API接口 (2).context 对象的方法列表二.步骤 wxml中: <canvas canvas-id="myCanvas" class="myCanvas" ></canvas> 在js文件onLoad: function() {}的方法中开始编写代码 1.创建一个 Canvas 绘图上下文 CanvasContext const ctx = wx.createCanvasContext('myCanvas')

canvas 绘制图形

什么是canvas? <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. 方法属性颜色.样式和阴影属性描述 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式. strokeStyle 设置或返回用于笔触的颜色.渐变或模式. shadowColor 设置或返回用于阴影的颜色. shadowBlur 设置或返回用于阴影的模糊级别. shadowOffsetX 设置或返回