canvas学习

最新推荐文章于 2023-02-10 14:19:36 发布
最新推荐文章于 2023-02-10 14:19:36 发布
阅读量633 收藏 2
点赞数
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i_am_a_div/article/details/119637574
版权

1.在这里插入图片描述

<!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>Document</title>
  <style>
    canvas {
      border: 1px solid #000;
      background-color: #1fff;
    }
  </style>
</head>

<body>
  <div>
    <div>部分浏览器不支持canvas 只需要在canvas标签内书写提示文字即可 <br> canvas只有三个属性 id width默认300 height默认150</div>
    <canvas id="mycanvas" width="300" height="150">浏览器不支持cancas 请升级！</canvas>
  </div>

  <script>
    // 部分浏览器不支持canvas  只需要在canvas标签内书写提示文字即可 canvas只有三个属性 id width默认300 height默认150
    function draw() {
      var canvas = document.getElementById("mycanvas")
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d')
      } else {
        // canvas-unsupported code here
      }
    }

    draw()
  </script>
</body>

</html>

在这里插入图片描述

      var canvas = document.getElementById("mycanvas")
      if (!canvas.getContext) return;
      var ctx = canvas.getContext('2d')

      // 1.先设置颜色 在绘制图形 否则颜色失效
      // 2.超出canvas的部分会被隐藏
      // 3.下方的会覆盖上方的
      ctx.fillStyle = "#FF0000"
      ctx.fillRect(0, 0, 200, 300)

      ctx.fillStyle = "#00FF00"
      ctx.fillRect(100, 0, 200, 100)

3.绘制矩形的三种方法
在这里插入图片描述

      var canvas = document.getElementById("mycanvas")
      if (!canvas.getContext) return;
      var ctx = canvas.getContext('2d')
      // canvas 提供了三种方法绘制矩形：
      // 1.fillRect(x, y, width, height) 绘制一个填充的矩形
      // 2.strokeRect(x, y, width, height) 绘制一个矩形的边框
      // 3.clearRect(x, y, widh, height) 清除指定的矩形区域，然后这块区域会变的完全透明。
      ctx.fillStyle = "#FF0000"
      ctx.fillRect(0, 0, 30, 50)

      ctx.strokeRect(0, 60, 30, 40)

      ctx.clearRect(10, 10, 10, 10)

      // 几种渲染和画图的区别
      cvsCtx.fillRect(10, 10, 100, 50); //直接填充出矩形
      cvsCtx.strokeRect(10, 10, 100, 50); //直接画矩形边框
      cvsCtx.rect(10, 10, 100, 50); //直接画矩形边框
      cvsCtx.clearRect(20, 20, 20, 20) // 清空某块矩形区域
      cvsCtx.fill(); // 只是填充--需要先画图
      cvsCtx.stroke(); // 描边--需要先画图

4.路径划线

注意点：
      1.beginPath() 新建一条路径， 路径一旦创建成功， 图形绘制命令被指向到路径上生成路径--必须

      2.moveTo(x, y) 把画笔移动到指定的坐标(x, y)。 相当于设置路径的起始点坐标。---必须

      3.closePath() 创建从当前点回到起始点的路径  相当于将当前点终点1回到起始点0进行连接闭合  下次再划出的线只会从起点0到终点2 而不是从终点1画到终点2

      4.stroke() 通过线条来绘制图形轮廓----划线描边---不会自动closePath()----必须要有--否则不会有描出的线

      5.fill() 通过填充路径的内容区域生成实心的图形---填充闭合区域。如果closePath路径未关闭，那么 fill() 方法会从路径结束点到最初的开始点moveTo之间添加一条线，以关闭该路径，然后填充该路径。

划线1.
在这里插入图片描述

      var canvas = document.getElementById("mycanvas")
      if (!canvas.getContext) return;
      var cvsCtx = canvas.getContext('2d')

      cvsCtx.beginPath();
      cvsCtx.moveTo(10, 50);
      cvsCtx.lineTo(100, 100);

      cvsCtx.closePath();
      cvsCtx.lineTo(200,100)
      cvsCtx.stroke();

划线2.
在这里插入图片描述

      var canvas = document.getElementById("mycanvas")
      if (!canvas.getContext) return;
      var cvsCtx = canvas.getContext('2d')
      
      cvsCtx.beginPath();
      cvsCtx.moveTo(10, 50);
      cvsCtx.lineTo(100, 100);

      // cvsCtx.closePath();
      cvsCtx.lineTo(200,100)
      cvsCtx.stroke();

划线3
在这里插入图片描述

      var canvas = document.getElementById("mycanvas")
      if (!canvas.getContext) return;
      var cvsCtx = canvas.getContext('2d')
      cvsCtx.beginPath();
      cvsCtx.moveTo(10, 50);
      cvsCtx.lineTo(100, 100);

      cvsCtx.lineTo(200,100)
      cvsCtx.closePath();
      cvsCtx.stroke();

5.画弧线

在这里插入图片描述

方法1：
      cvsCtx.arc(x, y, r, sAngle, eAngle, false);
      x,y原点 r半径 开始和技术的角度Math.PI就是圆周率   2* Math.PI为圆   画图方向默认顺时针false

      var canvas = document.getElementById("mycanvas")
      if (!canvas.getContext) return;
      var cvsCtx = canvas.getContext('2d')

      cvsCtx.beginPath();
      cvsCtx.arc(50, 50, 40, 0, 1.5 * Math.PI, false);
      // cvsCtx.closePath();
      cvsCtx.stroke()
      // cvsCtx.fillStyle = "#00ff00";
      // cvsCtx.fill()

      cvsCtx.beginPath();
      cvsCtx.arc(150, 50, 40, 0, 1.5 * Math.PI, false);
      cvsCtx.closePath();
      cvsCtx.stroke()
      cvsCtx.fillStyle = "#00ff00";
      cvsCtx.fill()

在这里插入图片描述

      cvsCtx.arcTo(x1, y1, x2, y2, radius);
      弧线点1 弧线点2 半径r  就是两点的切线画弧度

      cvsCtx.beginPath();
      cvsCtx.moveTo(20, 20); // 创建开始点
      cvsCtx.lineTo(100, 20); // 创建水平线
      cvsCtx.arcTo(150, 20, 150, 70, 50); // 创建弧
      cvsCtx.lineTo(150, 120); // 创建垂直线
      cvsCtx.stroke(); // 进行绘制

6.二次贝塞尔曲线和三次贝塞尔曲线

在这里插入图片描述

      var canvas = document.getElementById("mycanvas")
      if (!canvas.getContext) return;

      var cvsCtx = canvas.getContext('2d')
      cvsCtx.fillRect(40, 40, 2, 2)
      cvsCtx.fillRect(240, 40, 2, 2)
      cvsCtx.fillRect(80, 140, 2, 2)

      // cvsCtx.quadraticCurveTo(cpx, cpy, x, y);  cpx, cpy是控制点  x, y是结束点
      cvsCtx.beginPath();
      cvsCtx.moveTo(40, 40); //起始点
      cvsCtx.quadraticCurveTo(80, 140, 240, 40);
      cvsCtx.strokeStyle = "#0000ff";
      cvsCtx.stroke();

在这里插入图片描述

      var canvas = document.getElementById("mycanvas")
      if (!canvas.getContext) return;

      var cvsCtx = canvas.getContext('2d')
      cvsCtx.beginPath();
      cvsCtx.moveTo(40, 200); //起始点
      var cp1x = 20,
        cp1y = 100; //控制点1
      var cp2x = 100,
        cp2y = 120; //控制点2
      var x = 200,
        y = 200; // 结束点
      //绘制二次贝塞尔曲线
      cvsCtx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
      cvsCtx.stroke();

      cvsCtx.beginPath();
      cvsCtx.rect(40, 200, 10, 10);
      cvsCtx.rect(cp1x, cp1y, 10, 10);
      cvsCtx.rect(cp2x, cp2y, 10, 10);
      cvsCtx.rect(x, y, 10, 10);
      cvsCtx.fill();

7.样式和颜色

在这里插入图片描述

      var canvas = document.getElementById("mycanvas")
      if (!canvas.getContext) return;
      var cvsCtx = canvas.getContext('2d')

      // cvsCtx.fillStyle = "#00cc00"; //填充色
      // cvsCtx.strokeStyle = "##00dd00";//描边色

      for (let x = 0; x < 12; x++) {
        for (let y = 0; y < 12; y++) {
          console.log(x, y);
          cvsCtx.fillStyle = 'rgba(' + Math.floor(255 - x * 21.25) + ',' + Math.floor(255 - y * 21.25) + ',' + 255 +
            ',' +
            '1)';
          cvsCtx.fillRect(x * 25, y * 25, 25, 25);
        }
      }

在这里插入图片描述

  <script type="text/javascript">
    function draw() {
      var canvas = document.getElementById('mycanvas');
      if (!canvas.getContext) return;
      var ctx = canvas.getContext("2d");
      for (var i = 0; i < 6; i++) {
        for (var j = 0; j < 6; j++) {
          ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
          ctx.strokeRect(j * 50, i * 50, 40, 40);
        }
      }
    }
    draw();
    /**
     作者:李振超      4 Jun 2017 12:12
     返回随机的 [from, to] 之间的整数(包括from，也包括to)
     */
    function randomInt(from, to) {
      return parseInt(Math.random() * (to - from + 1) + from);
    }
  </script>

8.透明度

在这里插入图片描述

       var canvas = document.getElementById('mycanvas');
      if (!canvas.getContext) return;
      var cvsCxt = canvas.getContext("2d");

      cvsCxt.fillStyle = "rgba(1,255,255)";
      cvsCxt.fillRect(20, 20, 75, 50);

      // 调节透明度--设置后会影响到下方的透明度--所以可以一个一设或者设置一个后 在重置掉
      // 最好的办法是使用rgba()设置透明度
      cvsCxt.globalAlpha = 0.2;
      cvsCxt.fillStyle = "#00ff00";
      cvsCxt.fillRect(50, 50, 75, 50);
      cvsCxt.globalAlpha = 0.8;
      cvsCxt.fillStyle = "red";
      cvsCxt.fillRect(80, 80, 75, 50);

9.线段样式

1.线段宽度
在这里插入图片描述

      var canvas = document.getElementById('mycanvas');
      if (!canvas.getContext) return;
      var cvsCtx = canvas.getContext("2d");

      cvsCtx.beginPath();
      cvsCtx.moveTo(10, 10);
      cvsCtx.lineTo(100, 10);
      cvsCtx.strokeStyle = "#ff0000";
      cvsCtx.stroke();

      cvsCtx.beginPath();
      cvsCtx.moveTo(20, 20);
      cvsCtx.lineTo(200, 20);
      cvsCtx.lineWidth = 5; // lineWidth = num 默认是1  会影响后面的线条宽度
      cvsCtx.strokeStyle = "#00ff00";
      cvsCtx.stroke();

在这里插入图片描述

      var canvas = document.getElementById('mycanvas');
      if (!canvas.getContext) return;
      var cvsCtx = canvas.getContext("2d");

      var lineCaps = ["butt", "round", "square"]; 
      // cvsCtx.lineCap = "" 线段末端以方形、圆形、多一块方形结束

      for (var i = 0; i < 3; i++) {
        cvsCtx.beginPath();
        cvsCtx.moveTo(20 + 30 * i, 30);
        cvsCtx.lineTo(20 + 30 * i, 100);
        cvsCtx.lineWidth = 20;
        cvsCtx.lineCap = lineCaps[i];
        cvsCtx.stroke();
      }

      cvsCtx.beginPath();
      cvsCtx.moveTo(0, 30);
      cvsCtx.lineTo(300, 30);

      cvsCtx.moveTo(0, 100);
      cvsCtx.lineTo(300, 100)

      cvsCtx.strokeStyle = "red";
      cvsCtx.lineWidth = 1;
      cvsCtx.stroke();

在这里插入图片描述

      var canvas = document.getElementById('mycanvas');
      if (!canvas.getContext) return;
      var cvsCtx = canvas.getContext("2d");

      var lineJoin = ['round', 'bevel', 'miter']; //cvsCtx.lineJoin = 线段连接处以圆形、矩形、菱角相连接
      cvsCtx.lineWidth = 20;

      for (var i = 0; i < lineJoin.length; i++) {
        cvsCtx.lineJoin = lineJoin[i];
        cvsCtx.beginPath();
        cvsCtx.moveTo(50, 50 + i * 50);
        cvsCtx.lineTo(100, 100 + i * 50);
        cvsCtx.lineTo(150, 50 + i * 50);
        cvsCtx.lineTo(200, 100 + i * 50);
        cvsCtx.lineTo(250, 50 + i * 50);
        cvsCtx.stroke();
      }

在这里插入图片描述

      var canvas = document.getElementById('mycanvas');
      if (!canvas.getContext) return;
      var cvsCtx = canvas.getContext("2d");

      cvsCtx.setLineDash([20, 2]); // [实线长度, 每个间隙长度]
      cvsCtx.lineDashOffset = -10; //属性设置起始偏移量
      cvsCtx.strokeRect(20, 20, 200, 100);
i_am_a_div_日积月累_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div标签、html/css基本样式、canvas画布
huxia4815的博客
11-23 1874
Html/css Div也叫盒子，盒子一般用于页面的布局。 给这个盒子加上样式就是css 加样式有两种方式： 1、写在这个标签的内部。就直接将样式赋给了这个标签。 2、写在标签的外部：放在head中间。 为什么要放在外面： 1、格式更加清晰，分离比较清晰。 2、写在外面，可以减少代码，因为有的元素他们的样式是相同的，没必要同样的样式写多次 3、容易封装 写在外面就要区分到底是给
html5绘制div,HTML5 Canvas 绘制图像
weixin_39641876的博客
06-11 1062
canvas可以引入图像，它可以用于图片合成或者制作背景等。只要是 Gecko 支持的图像(如 PNG，GIF，JPEG等)都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。获取图像的方式我们可以通过 document.images 集合、document.getElementsByTagName(canvasName||imageName) 方法又或者 docu...
三步学会canvas
CoreyJu的博客
03-29 604
canvas作为HTML5新增的组件，给前端开发提供了绘制图形与简单动画的能力。作为一个前端开发工程师，canvas是一个必须要了解学习的组件，用canvas画出一个好看的图形，还是很有成就感的。
关于canvas与div的转换
程序员日志
03-22 3717
个人学习记录 关于HTML2canvas和canvas2image
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
热门推荐
商务合作 | 共同学习 | 携手共进
02-18 10万+
canvas 简介、canvas 绘图基础(标签介绍、上下文context、beginPath 状态)、案例：绘制表格、绘制饼状图。
canvas学习和滤镜实现代码
12-14
在这个数码产品泛滥的时代里，拍照已经成为生活不可或缺的一部分，不管是居家，踏青，还是远途旅行，总会拍一些美美的照片。...最近学习了 HTML5 中的重头戏– canvas 。利用 canvas，前端人员可以很轻松地、进行图像处
canvas学习.zip
06-21
由于标题为"canvas学习.zip"，并且描述提到了"canvas的官网小例子"，我们可以从中了解到这个压缩包可能包含了一些用于学习`canvas`的实例代码。 `canvas`标签是一个内联元素，通过JavaScript API与之交互。在HTML中...
canvas学习总结三之绘制路径-线段
12-14
Canvas绘图环境中有些属于立即绘制图形方法，有些绘图方法是基于路径的。 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText()方法也是立即绘制的，但是文本不算是图形。 基于路径的绘制...
把view或者div绘制 canvas ，导出图片功能实现完整源码附效果图（兼容H5和小程序）
a_靖的博客
01-07 4067
先看下效果图：（上面灰色块内的用div和CSS写出来的，然后绘制到canvas） 实现此功能需要使用到一个微信小程序的插件，插件官方文档地址： wxml-to-canvas | 微信开放文档 本博客代码环境，uniapp（vue） 实现流程： 1.创建uniapp项目，命名为 （htmlToCarvasDemo） 2.Alt + C 打开终端，运行npm i x-wxml-to-canvas，安装插件 npm ix-wxml-to-canvas 3.在index目录添加，d..
html5根据坐标画div,如何使用jquery在html5画布上绘制DIV的内容
weixin_42394088的博客
06-03 322
假设我有div和div里面我有几个表单控件,如文本框,dropdow复选框,radiobutton等.现在我希望当用户单击某个特定按钮时,div的内容将在画布上绘制.我搜索谷歌有一些示例代码或示例,但没有找到.请指导我如何使用jquery在html5画布上绘制DIV的内容,因为它是样式表的控件外观.问题已更新User NamePasswordLog in假设我有一个上面的表单,我需要通过jquer...
HTML通过canvas实现简单的画图功能
CaseyWei
07-25 5206
  功能描述：  有红绿蓝三种颜色的画笔，可以选择画笔的粗细，画出的图可以保存到右边的六个画框中。当右边的六个画框都画满之后，便不能继续保存来了。可以清除画框，清除画布。保存的图片可以右击保存为png格式。 实现效果如图所示：  实现代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta cha...
canvas根据坐标点位画图形-canvas拖拽编辑单个图形形状
qq_44052087的博客
02-10 1074
【代码】canvas根据坐标点位画图形-canvas拖拽编辑单个图形形状。
Canvas的使用，根据坐标在图片中画出矩形，框图
baichrn的博客
10-17 3797
通过使用canvas快速展示矩形框图坐标
HTML5的新增元素—canvas
m0_60489011的博客
09-16 397
1. 定义 画布是用来绘制图形，属于html元素，是h5的新元素，需要结合js。 2. 语法 <canvas></canvas> 【注意：canvas需要写闭合标签，不可以以单标签的形式出现】 一般不建议使用css设置它的宽高 3. 属性 width默认值300px ...
Canvas绘图教程及简单实践
feiyu_may的博客
09-04 9545
一、前言     最近想尝试用代码画图，最开始考虑的是用css，用css画图的本质就是不断地拼接div，熟悉一些基本的css属性根据需求去设置，有一定的耐心就可以实现。网上有很多优秀的例子，如下面教程中的哆啦A梦。    https://blog.csdn.net/qq_29326717/article/details/73690980     但是觉得这样的方式并不灵活，在查阅资料的过程中深入了...
HTML5 高级之canvas 绘制图形
maoye的博客
10-06 5846
canvas是HTML5中新增的标签，像所有dom一样，拥有自己的属性、方法、和事件，其中就有绘图的方法，js能够调用它在网页上完成绘图。 canvas也是HTML5中最强大的特性之一，允许开发者使用动态和交互式方法在web上实现桌面应用程序的功能   canvas元素会在网页上创建一个空白区域，然后通过API操作这个区域，与空白的div元素相似，用途完全不同     语法：&lt;c...
如何系统学习canvas
最新发布
02-20
学习Canvas可以采用多种方式，首先可以通过阅读有关Canvas的文档，学习它的基本概念；其次，可以通过实践，学习如何使用Canvas的API绘制图形；再次，可以阅读一些开源的Canvas项目，学习它们是如何实现的；最后，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值