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

Canvas Study

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

<canvas></canvas>标签

一、.基础案例
  • 1、 canvas.getContent ( contextType , contextAttributes )

    contextTypecontextAttributes
    ①“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)';
    }
    
  • 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)

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

  • 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){
            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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值