【Canvas】HTML5 新特性——绘溢天下

最新推荐文章于 2023-10-24 14:27:56 发布

不倒翁丶

最新推荐文章于 2023-10-24 14:27:56 发布

阅读量771

点赞数

分类专栏： Canvas 文章标签： canvas css

本文链接：https://blog.csdn.net/weixin_46059971/article/details/108671709

版权

Canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Canvas Study

Canvas ： html5 新特性，canvase 是一个标签，可用 css 渲染，但主要用 js 绘制图案，进行渲染，通过 Canvas 你可以实现任何你想绘制的图案、动画3D动效等；

<canvas></canvas>标签

一、.基础案例

1、 canvas.getContent ( contextType , contextAttributes )

contextType	contextAttributes
①“2d”，创建一个CanvasRenderingContext2D对象作为2D渲染的上下文；	alpha（boolean)：表示canvas是否包含一个alpha通道，设为false则浏览器知道背景永远不透明，能加速对于透明场景和图像的绘制。
	willReadFrequently（Boolean）：表示是否计划有大量的回读操作，频繁调用 getImageData() 方法时能节省内存，仅Gecko内核浏览器支持。
	storage（String）：声明使用的storage类型，默认为”persistent”。
②“webgl ( 或 experimental-webg l)”，创建一个WebGLRenderingContext对象作为3D渲染的上下文，只在实现了WebGL 2的浏览器上可用，实验性特性；	alpha：Boolean类型，指示画布是否包含alpha缓冲区。
	antialias：Boolean类型，指示是否执行抗锯齿。
	depth：Boolean类型，表示绘图缓冲区的深度缓冲区至少为16位。
	failIfMajorPerformanceCaveat：Boolean类型，指示如果系统性能较低，是否创建上下文。
	powerPreference：对用户代理的提示，指示GPU的哪种配置适合WebGL上下文。可能的值是： “default”：让用户代理决定哪种GPU配置最合适。这是默认值。“高性能”：优先考虑渲染性能而不是功耗。“低功耗”：优先考虑节能而不是渲染性能。
	premultipliedAlpha：Boolean类型，表示页面合成器将假定绘图缓冲区包含具有预乘alpha的颜色。
	preserveDrawingBuffer：如果值为true，则不会清除缓冲区并保留其值，直到作者清除或覆盖。
	stencil：Boolean类型，表示绘图缓冲区具有至少8位的模板缓冲区。
③“webgl2”，创建一个WebGL2RenderingContext对象作为3D渲染的上下文，只在实现了WebGL 3的浏览器上可用；
④“bitmaprenderer”，创建一个ImageBitmapRenderingContext，用于将位图渲染到canvas上下文上，实验性特性；

2、ele.fillStyle()

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

默认值： #000000
JavaScript 语法： context.fillStyle=color|gradient|pattern;

值描述
color 指示绘图填充色的 CSS 颜色值默认值是 #000000。
gradient 用于填充绘图的渐变对象（线性或放射性）
pattern 用于填充绘图的 pattern 对象
```
var cav = document.getElementById("cav");
if (cav.getContext){
    console.log("Canvas is already success running");
    var ctx = cav.getContext('2d');

    // fillstyle 背景颜色
    ctx.fillStyle = 'rgba(50,50,50,0.5)';
}
```

默认值：	#000000
JavaScript 语法：	context.fillStyle=color\|gradient\|pattern;

值	描述
color	指示绘图填充色的 CSS 颜色值默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性或放射性）
pattern	用于填充绘图的 pattern 对象

3、ele.fillRect()

context.fillRect(x,y,width,height);

参数	描述
x	矩形左上角的 x 坐标
y	矩形左上角的 y 坐标
width	矩形的宽度，以像素计
height	矩形的高度，以像素计

var cav = document.getElementById("cav");
if (cav.getContext){
    console.log("Canvas is already success running");
    // 绘制 2d 图形
    var ctx = cav.getContext('2d');

    // 绘制
    // fillstyle 背景颜色
    // fillRect 绘制矩形，的（上边距，左边距，宽，高）
    ctx.fillStyle = 'rgba(50,50,50,0.5)';
    ctx.fillRect(25,25,75,75);
}

4、ele.strokeRect(x, y, width, height)

绘制一个矩形的边框

5、ele.clearRect(x, y, width, height)

清除指定矩形区域，让清除部分完全透明。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas 初识</title>
    <style>
        canvas{
            border:5px solid red;
        }
    </style>
</head>
<body>
    <canvas id="cav" width="200" height="200">
        浏览器版本过低，请及时更新版本！
    </canvas>

    <script>
        var cav = document.getElementById("cav");
        if (cav.getContext){
            console.log("Canvas is already success running");
            // 绘制 2d 图形
            var ctx = cav.getContext('2d');
            
            // 绘制
            	// fillstyle 背景颜色
            	// fillRect 绘制矩形，的（上边距，左边距，宽，高）
            ctx.fillStyle = 'rgba(50,50,50,0.5)';
            ctx.fillRect(25,25,75,75);
        }
    </script>

</body>
</html>

Canvas 绘制路径

步骤：

一、首先，你需要创建路径起始点。
二、然后你使用画图命令去画出路径。
三、之后你把路径封闭。
四、一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

一、创建路径起始点

beginPath()				// 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。



stroke()				// 通过线条来绘制图形轮廓。

Tip:

当前路径为空（调用 beginPath() 之后），或 canvas 刚建的时候，第一条路径构造命令通常被视为是 moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

二、指定绘制路径

ctx.lineTo(100,10);		// 从当前的开始，绘制一条到坐标 100,10 的直线

三、路径封闭

closePath()				// 闭合路径之后图形绘制命令又重新指向到上下文中。

四、渲染图形

fill()					//通过填充路径的内容区域生成实心的图形。

Expand：

设置起点：
```
moveTo(x, y)			// 设置绘制起点
```

绘制直线：

lineTo(x, y)			// 绘制一条从当前位置到指定x以及y位置的直线。

绘制圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)

// 画一个以（x,y）为圆心的以 radius 为半径的圆弧（圆），从 startAngle 开始到 endAngle 结束，按照 anticlockwise 给定的方向（默认为顺时针）来生成。

arcTo(x1, y1, x2, y2, radius)		
// 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

Let’s Coding:

good

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas 绘制路径</title>
    <style>
        canvas{
            border:5px solid red;
        }
    </style>
</head>
<body>
    <canvas id="cav" width="200" height="200">
        浏览器版本过低，请及时更新版本！
    </canvas>

    <script>
        var cav = document.getElementById("cav");
        if (cav.getContext){
            // 绘制 2d 图形
            var ctx = cav.getContext('2d');

            ctx.beginPath();

            ctx.moveTo(75,90);		// 设置起点
            ctx.lineTo(100,90);		// 绘制一条从当前起点 到 100,90 的直线；
            ctx.lineTo(100,10);		// 绘制一条从当前起点 到 100,10 的直线；
            ctx.fill();
       }else{
            console.log("Canvas is already success running");
       }

    </script>

</body>
</html>

不倒翁丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Canvas】HTML5 新特性——绘溢天下

Canvas StudyCanvas ： html5 新特性，canvase 是一个标签，可用 css 渲染，但主要用 js 绘制图案，进行渲染，通过 Canvas 你可以实现任何你想绘制的图案、动画3D动效等； <canvas></canvas>标签一、.基础案例1、 canvas.getContent ( contextType , contextAttributes )contextTypecontextAttributes①“2d”，
复制链接

扫一扫

专栏目录