Canvas属性详解之-canvas、fillStyle

dreamjhs
642 阅读4分钟

简介:了解CanvasRenderingContext2D.canvas:

这个在我们利用CanvasRenderingContext2D对象扩展自定义方法适合非常有用，可参见后面的案例。，CanvasRenderingContext2D.canvas是一个只读属性，可以反向返回当前上下文源自哪个<canvas>元素,这个在我们利用CanvasRenderingContext2D对象扩展自定义方法适合非常有用,可参见后面的案例。

语法:

var canvas = context.canvas;

案例:

扩展一个名为fullCircle()按照最短边画圆的Canvas上下文方法，此时需要知道Canvas的尺寸，此时canvas属性就派上用场了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>了解CanvasRenderingContext2D.canvas</title>
</head>
<body>
    <canvas></canvas>
    <script>
        //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
        //在此是获取html中的canvas元素
        var canvas = document.querySelector("canvas")
        // canvas.getContext方法的参数有4种类型
         // "2d"：创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。
        // "webgl"(或"experimental-webgl")：创建一个WebGLRenderingContext对象作为3D渲染的上下文，只在实现了WebGL 2的浏览器上可用，实验性特性。
        // "webgl2"：创建一个WebGL2RenderingContext对象作为3D渲染的上下文，只在实现了WebGL 3的浏览器上可用。
        // "bitmaprenderer"：创建一个ImageBitmapRenderingContext，用于将位图渲染到canvas上下文上，实验性特性。
        const ct = canvas.getContext("2d")
        //在原型上面添加fullCircle方法
        CanvasRenderingContext2D.prototype.fullCircle = function (style) {
            // 反向获取当前上下文源Canvas元素
            var canvas = this.canvas;
            // 获取最短边的半径
            var minRadius = Math.min(canvas.width, canvas.height) / 2;
            // 使用arc() API 绘制圆
            this.fillStyle = style || "#000";
            //绘制圆弧
            this.beginPath();
            //context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
            //x:Number,圆弧对应的圆心横坐标。
            //y:Number,圆弧对应的圆心纵坐标。
            //radius:Number,圆弧半径的大小。
            //startAngle:Number,圆弧开始的角度,单位是弧度。
            //endAngle:Number,圆弧结束的角度,单位是弧度。
            //anticlockwise:Boolean,弧度的开始到结束的绘制是按照顺时针来算，还是按时逆时针来算。如何设置为true，则表示按照逆时针方向从startAngle绘制到endAngle。
            this.arc(canvas.width / 2, canvas.height / 2, minRadius, 0, 2 * Math.PI);
            //context.fill()填充路径的方法
            this.fill();
        }
        ct.fullCircle("red")
    </script>
</body>
</html>

实时效果如下:

微信图片_20220719144913.png

简介:了解CanvasRenderingContext2D.canvas

CanvasRenderingContext2D.canvas可以给Canvas中的各种图形填充样式。默认填充样式是黑色#000。

语法:

context.fillStyle = color;
context.fillStyle = gradient;
context.fillStyle = pattern;
其中:
color:使用纯色填充，支持RGB，HSL，RGBA，HSLA以及HEX色值。
gradient:使用渐变填充，可以是线性渐变或者径向渐变。
pattern:使用纹理填充。由于图片也能作为纹理，因此fillStyle也能填充普通的位图，可参见下面的案例。

案例1使用色值填充:

<canvas id="canvasColor"></canvas>
 //在此是获取html中的canvas元素
var canvasColor = document.getElementById('canvasColor');
 // canvas.getContext方法的参数有4种类型
 // "2d"：创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。
 // "webgl"(或"experimental-webgl")：创建一个WebGLRenderingContext对象作为3D渲染的上下文，只在实现了WebGL 2的浏览器上可用，实验性特性。
 // "webgl2"：创建一个WebGL2RenderingContext对象作为3D渲染的上下文，只在实现了WebGL 3的浏览器上可用。
 // "bitmaprenderer"：创建一个ImageBitmapRenderingContext，用于将位图渲染到canvas上下文上，实验性特性。
var contextColor = canvasColor.getContext('2d');
//RGB色值：RGB(255, 0, 0)
//HSL色值：HSL(360, 100%, 50%)
//RGBA色值：RGBA(255, 0, 0, .5)
//HSLA色值：HSLA(360, 100%, 50%, .5)
//HEX色值：#FF0000
contextColor.fillStyle = 'RGB(255, 0, 0)';
//contextColor.fillRect(x, y, width, height)矩形填充方法
//x:Number填充矩形的起点横坐标
//y:Number填充矩形的起点纵坐标
//width:Number填充矩形的宽度
//height:Number填充矩形的高度
contextColor.fillRect(10, 10, 100, 100);

实时效果如下:

微信图片_2022071915304711111111.png

案例2渐变填充-线性:

自古红蓝出cp，所以我们借助createLinearGradient() API实现一个从红色到绿色的线性渐变填充效果，代码如下：

<canvas id="canvasLinear"></canvas>
var canvasLinear = document.getElementById('canvasLinear');
var contextLinear = canvasLinear.getContext('2d');
// 创建线性渐变对象
//contextLinear.createLinearGradient(x0,y0,x1,y1)
//x0:Number渐变起始点横坐标
//y0:Number渐变起始点纵坐标
//x1:Number渐变结束点横坐标
//y1:Number渐变结束点纵坐标
//注意:线性渐变效果比较好脑补，就是从坐标点[x0, y0]到坐标点[x1, y1]的位置画一条线，然后整个渐变色带与与这条线垂直。
var gradientLinear = contextLinear.createLinearGradient(0, 0, 0, 100);
gradientLinear.addColorStop(0, 'red');
gradientLinear.addColorStop(1, 'green');
// 填充线性渐变
contextLinear.fillStyle = gradientLinear;
//contextLinear.fillRect(x, y, width, height)矩形填充方法
//x:Number填充矩形的起点横坐标
//y:Number填充矩形的起点纵坐标
//width:Number填充矩形的宽度
//height:Number填充矩形的高度
contextLinear.fillRect(10, 10, 100, 100);

实时效果如下:

微信图片_20220719154118www.png

案例3渐变填充-径向:

自古红蓝出cp +1，所以我们借助createRadialGradient() API实现一个从红色到绿色的径向渐变填充效果，代码如下：

<canvas id="canvasRadial"></canvas>
ar canvasRadial = document.getElementById('canvasRadial');
var contextRadial = canvasRadial.getContext('2d');
// 创建径向渐变对象，半径50
//contextRadial.createRadialGradient(x0, y0, r0, x1, y1, r1);
//x0:Number起使圆的横坐标
//y0:Number起使圆的纵坐标
//r0:Number起使圆的半径
//x1:Number结束圆的横坐标
//y1:Number结束圆的纵坐标
//r1:Number结束圆的半径
var gradientRadial = contextRadial.createRadialGradient(60, 60, 0, 60, 60, 50);
gradientRadial.addColorStop(0, 'red');
gradientRadial.addColorStop(1, 'green');
// 填充径向渐变
contextLinear.fillStyle = gradientRadial;
contextLinear.fillRect(10, 10, 100, 100);

实时效果如下:

微信图片_2022071915484111111111113.png

案例4图片填充:

我们找一张好看的底纹图片作为图案进行填充，找啊找啊找，就下面这个素材吧：

pattern.jpg 相关代码如下：

<canvas id="canvasPattern"></canvas>
var canvasPattern = document.getElementById('canvasPattern');
var contextPattern = canvasPattern.getContext('2d');
// 创建图案对象
var imagePattern = document.createElement('img');
imagePattern.onload = function () {
    // 缩放原始图片到50*50大小
    var canvas = document.createElement('canvas');
    canvas.width = canvas.height = 50;
    var context = canvas.getContext('2d');
    // 通过drawImage()方法缩放
    [drawImage()相关参数配置](https://www.canvasapi.cn/CanvasRenderingContext2D/drawImage#&syntax)
    context.drawImage(this, 0, 0, 50, 50);
    // 把这个创建的canvas图形作为图案使用
    var pattern = contextPattern.createPattern(canvas, 'repeat');
    // 填充图案
    contextPattern.fillStyle = pattern;
    contextPattern.fillRect(10, 10, 100, 100);
};
imagePattern.src = './pattern.jpg';

实时效果如下:

微信图片_20220719155951121212.png

avatar
文章
阅读
粉丝