返回顶部
首页 > 资讯 > 前端开发 > VUE >html canvas怎么使用
  • 267
分享到

html canvas怎么使用

2024-04-02 19:04:59 267人浏览 薄情痞子
摘要

这篇文章主要介绍“html canvas怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html canvas怎么使用”文章能帮助大家解决问题。 canva

这篇文章主要介绍“html canvas怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html canvas怎么使用”文章能帮助大家解决问题。

canvas :可以理解为一个div,作用是一块画板

如果想要使用canvas,需要创建一个“画家”。生成画家的方法:

var huaban = document.querySelector('.canvas');//画板
var bicaso = huaban.getContext('2d');//画家  canvas上下文对象
//绘画操作  
//表示在距离画板左上10px 10px的位置画了一个长宽分别为50px的矩形,默认填充颜色黑色  绘制矩形
bicaso.fillRect(10,10,50,50);
//表示绘制轮廓线
bicaso.strokeRect(10,10,50,50);
//绘制画笔颜色
bicaso.fillStyle='颜色';
//擦除矩形方法
bicaso.clearRect(x,y,要擦除的矩形宽度,要擦除的矩形高度);

Transparency(透明度)

globalAlpha = transparencyValue: 这个属性影响到 canvas 里所有图形的透明度,有效的值范围是 0.0 (完全透明)到 1.0(完全不透明),默认是 1.0。

globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过,我认为使用rgba()设置透明度更加好一些。

canvas基础demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta Http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 在页面中添加canvas元素 -->

    <!--1. 创建一块画布。必须定义canvas的id属性以方便js调用。  可以使用CSS控制canvas的外观 -->
    <canvas id="myCanvas" width="300" height="300" style="border: 2px solid red;">
        <!-- 通过javascript可以在画布中添加线条文字图片动画,也可以绘画 -->
        <!-- 有些浏览器不支持canvas元素,会直接忽略canvas元素显示替代内容。所以需要为这些浏览器提供替代canvas的显示内容 -->
        您的浏览器不支持canvas,请更新或更换浏览器。
    </canvas>

    <canvas id="canvas2" width="300" height="300" style="border: 2px solid red;">您的浏览器不支持canvas</canvas>

    <canvas id="tutorial" width="300" height="300" style="border: 2px solid red;">您的浏览器不支持canvas</canvas>
    


    <script>
        // 2.在js脚本中获取到canvas元素
        var canvas = document.getElementById('myCanvas');

        // 判断getContext()方法是否存在,来检测浏览器是否支持canvas==========================
        if(canvas.getContext) {
            alert("您的浏览器支持canvas");
        }else {
            alert("您的浏览器不支持canvas");
        }
        // ===============================================================================

        // 3.通过canvas的getContext()方法获取画布上下文,即创建context对象。以获取允许进行绘画的2D环境。  或者3D环境("3D")
        var context = canvas.getContext("2d");//getContext("2d")该方法用于返回一个内建的h6对象,该对象提供了用于绘图的方法和属性,使用该对象可以在canvas画布中绘制图形。  相当于画笔。
        
        // 4.绘制图形的操作  =============================================================================================================
        
        //绘制一个矩形,填充色为蓝色,矩形坐标为(10,10) 长50宽80。-------------------------------
        context.fillStyle="blue";
        context.fillRect(10,10,50,80);//strokeRect(x,y,width,height)  clearRect(x, y, widh, height):清除指定的矩形区域,然后这块区域会变的完全透明。
        // 循环生成若干个40px的小矩形,边框颜色随机-------------------------------------------------
        function draw0(){
            var canvas = document.getElementById('canvas2');
            if (!canvas.getContext) return;
            var ctx = canvas.getContext("2d");
            for (var i = 0; i < 6; i++){//6行6列
                for (var j = 0; j < 6; j++){
                    ctx.fillStyle = "rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})";
                    // ctx.fillStyle = "rgb(randomInt(0, 255),randomInt(0, 255),randomInt(0, 255))";
                    ctx.strokeRect(j * 50, i * 50, 40, 40);
                    // ctx.fillRect(j * 50, i * 50, 40, 40);
                }
            }
        }
        draw0();
        
        function randomInt(from, to){
            return parseInt(Math.random() * (to - from + 1) + from);
        }
          
        
        //绘制一条直线-------------------------------------------------
        context.moveTo(0,0);
        context.lineTo(200,30);
        context.stroke();

        // 绘制复杂图形--------使用绘制路径方法--------Math.sin()----Math.cos()------Math.PI------beginPath()---lineTo()----closePath()-----------
        var n = 0;
        var dx = 150;
        var dy = 150;
        var s = 100;
        context.beginPath();//开始一条路径 或重置当前路径
        context.fillStyle = 'orange';//填充属性设置
        context.strokeStyle = 'yellow';//边框样式
        context.lineWidth = '1';//边框宽度
        var x = Math.sin(0);//使用sin cos三角函数计算顶点坐标x,y
        var y = Math.cos(0);
        var dig = Math.PI / 15 * 11;//Math.PI返回的是圆周率 &pi; 
        for(var i = 0;i<30;i++) {//表示30个点的连线
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.lineTo(dx+x*s,dy+y*s);
        }
        context.closePath();//关闭路径
        context.fill();//填充 默认填充黑色
        context.stroke();//边框  默认黑色

        // 绘制圆形----------------beginPath()----arc()-----closePath()-------------------------------
        // arc(x,y,r,sAngle,eAngle,counterclockwise);---x,y表示圆心坐标---r表示圆版半径---sAngle起始角【0】---eAngle结束角【2*Math.PI】---counterclockwise规定逆时针还是顺时针绘图(false顺时针,true逆时针)  
        context.fillStyle = "blue";//设置画笔填充颜色样式
        context.strokeStyle = 'red';//设置边框颜色样式
        context.strokeWidth = '2';
        context.beginPath();//开始创建路径
        context.arc(50,50,50,0,2*Math.PI,true);//圆心坐标(50,50) 半径50 逆时针旋转 从0&deg;~360&deg;
        context.closePath();
        context.fill();
        context.stroke();

        // 绘制14条弧形-------------------------0&deg;表示水平线  +90&deg;表示负y轴方向-----------------------------------------------------------
        for(var i=0;i<15;i++) {
            context.strokeStyle='red';
            context.beginPath();
            context.arc(10,300,i*10,0,Math.PI*3/2,true);//弧心坐标(0,300) 半径10*i  逆时针旋转0&deg;~((1/2)&pi;)&deg; 逆时针旋转0&deg;~90&deg;
            context.closePath();//从当前点到开始点的闭合路径操作
            context.stroke();
        }
        // 绘制圆弧-------------通过使用控制点----arcTo(x1,y1,x2,y2,r);--控制点1坐标  控制点2坐标 圆弧半径----------------------------------------
        context.beginPath();
        context.moveTo(150,150)//起点坐标
        context.arcTo(200,150,200,250,60);//arcTo表示绘制的图形由两条切换所决定。l1为起始点和控制点1的直线,l2为控制点1和控制点2的直线
        context.lineTo(250,250);//到达的下一点的坐标
        context.stroke();//绘图
        context.fill();//填充


        // 绘制路径------------------------路径都是闭合的----------------------------------
        function draw1() {
            context.fillStyle="orange";
            context.beginPath();//新建一条路径
            context.moveTo(10,10);//将画笔移动到指定坐标
            context.lineTo(200,50);
            context.lineTo(10,50);
            context.closePath();//闭合
            context.stroke();//绘制路径
            context.fill();//填充闭合区域
        }
        draw1();

        // 透明度  Transparency(0.0,1.0)  globalAlpha = transparencyValue;  如果不是大量需要设置透明度,用rgba就够了

        // lineWidth  线条宽度

        // lineCap = type  线条末端样式  butt--末端以方形结束  round--末端以圆形结束  square--末端以方形结束,但两端都增加了一个长度为线宽一半的矩形区域

        // lineJoin=type  线条接合处样式  round--弧形  bevel--接合处以横线为底  miter(默认)--接合处延申相连部分的外边缘,形成灵性
        function draw3(){
            var canvas = document.getElementById('tutorial');
            if (!canvas.getContext) return;
            var ctx = canvas.getContext("2d");
            var lineJoin = ['round', 'bevel', 'miter'];
            ctx.lineWidth = 20;  
            for (var i = 0; i < lineJoin.length; i++){
                ctx.lineJoin = lineJoin[i];
                ctx.beginPath();
                ctx.moveTo(50, 50 + i * 50);
                ctx.lineTo(100, 100 + i * 50);
                ctx.lineTo(150, 50 + i * 50);
                ctx.lineTo(200, 100 + i * 50);
                ctx.lineTo(250, 50 + i * 50);
                ctx.stroke();
            }
        }
        draw3(); 

        
    </script>
</body>
</html>

关于“html canvas怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网VUE频道,小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: html canvas怎么使用

本文链接: https://www.lsjlt.com/news/91820.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • html canvas怎么使用
    这篇文章主要介绍“html canvas怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html canvas怎么使用”文章能帮助大家解决问题。 canva...
    99+
    2024-04-02
  • HTML canvas scale()方法怎么使用
    HTML canvas 的 scale() 方法用于按照指定的比例缩放绘图。使用方法如下:1. 获取 canvas 元素的引用:``...
    99+
    2023-10-11
    HTML
  • HTML中canvas标签怎么用
    这篇文章主要为大家展示了“HTML中canvas标签怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML中canvas标签怎么用”这篇文章吧。 &nb...
    99+
    2024-04-02
  • Canvas怎么使用
    本篇内容介绍了“Canvas怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!传统的HTML主要用于文本的创建,可以通过<img&...
    99+
    2023-06-04
  • 怎么使用HTML5 Canvas
    这篇文章主要介绍“怎么使用HTML5 Canvas”,在日常操作中,相信很多人在怎么使用HTML5 Canvas问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使用HTML...
    99+
    2024-04-02
  • html如何使用canvas绘制文本
    这篇文章主要为大家展示了“html如何使用canvas绘制文本”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html如何使用canvas绘制文本”这篇文章吧。 ...
    99+
    2024-04-02
  • python中canvas怎么使用
    在Python中,可以使用`tkinter`库来创建一个画布对象并使用它来绘制图形。以下是一个简单的示例:```pythonimpo...
    99+
    2023-09-20
    python
  • 如何使用HTML 5 Canvas递归画树
    这期内容当中小编将会给大家带来有关如何使用HTML 5 Canvas递归画树,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。上图就是用html5随机生成的大树 : ) 但是...
    99+
    2024-04-02
  • HTML canvas fillRect()的作用是什么
    fillRect()是HTML canvas元素的一个方法,用于在画布上绘制一个填充矩形。它的作用是在指定位置绘制一个矩形,并填充该...
    99+
    2023-10-21
    HTML
  • HTML canvas fillRect()方法有什么用
    HTML canvas的fillRect()方法用于在画布上绘制一个填充的矩形。具体用途如下:1. 绘制形状:可以使用fillRec...
    99+
    2023-10-11
    HTML
  • canvas怎么在html5 中使用
    这期内容当中小编将会给大家带来有关canvas怎么在html5 中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。<!DOCTYPE HTML><html><he...
    99+
    2023-06-09
  • canvas怎么用
    小编给大家分享一下canvas怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!canvas有一个神奇的方法getImageD...
    99+
    2024-04-02
  • html5中canvas方法怎么使用
    这篇文章主要介绍“html5中canvas方法怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html5中canvas方法怎么使用”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • HTML5中怎么使用Canvas标签
    这篇文章主要介绍“HTML5中怎么使用Canvas标签”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML5中怎么使用Canvas标签”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • html5的canvas元素怎么使用
    这篇文章主要介绍“html5的canvas元素怎么使用”,在日常操作中,相信很多人在html5的canvas元素怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html...
    99+
    2024-04-02
  • 使用canvas怎么绘制线段
    这篇文章给大家介绍使用canvas怎么绘制线段,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。基础知识canvas 的基础知识不算多,主要掌握如何绘制线段,图形,图片,文本等。canvas可以在浏览器中绘制,也可以借助 ...
    99+
    2023-06-09
  • 怎么在Canvas中使用Fabric.js库
    今天就跟大家聊聊有关怎么在Canvas中使用Fabric.js库,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。简介什么是Fabric.jsFabric.js是一个可以简化Canvas...
    99+
    2023-06-09
  • 怎么使用canvas压缩图片
    今天就跟大家聊聊有关怎么使用canvas压缩图片,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。首先要先获取到图片文件var eleFile = docu...
    99+
    2023-06-09
  • 怎么使用Canvas绘制圆形
    这篇文章主要介绍“怎么使用Canvas绘制圆形”,在日常操作中,相信很多人在怎么使用Canvas绘制圆形问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使用Canvas绘制圆形”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-03
  • Android canvas drawBitmap方法怎么使用
    Android中的Canvas类提供了一个drawBitmap()方法来绘制位图。该方法有多个重载,具体使用方式如下:1. 绘制完整...
    99+
    2023-08-11
    Android
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作