HTML5 cancas

最新推荐文章于 2024-12-31 14:35:34 发布
最新推荐文章于 2024-12-31 14:35:34 发布
阅读量366 收藏
点赞数 1
分类专栏： 笔记 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_46440394/article/details/119903916
版权
本文介绍了HTML5的canvas元素，用于动态渲染图形。详细讲述了canvas的使用步骤，包括设置宽高、获取上下文及绘制图形的方法。同时，文章对比了canvas与SVG的区别，强调了canvas在图像密集型游戏中的优势，而SVG则适合大型渲染区域的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

canvas：画布

canvas : 画布，它是一个标签; 允许脚本（js）动态渲染图形

canvas 的使用

1. html中需要定义一个canvas 标签

 <canvas id="mycanvas" height="" width=""></canvas>

注：canvas 的宽高，要通过height,width属性去设置

2. js 中获取canvas，得到canvas 上下文，调用对应的属性和方法

 var context = document.getElementById("mycanvas").getContext("2d");

3. canvas 绘制图形
3.1直线
在这里插入图片描述

 // 绘制直线
     function drawLine() {
          context.moveTo(0,0) ; //设置起点 x,y
        context.lineWidth=5;
        context.strokeStyle="red";
       //直线中的点
        context.lineTo(500,300);
        // 结束
        context.stroke();
      }

3.2添加折点：
在这里插入图片描述

    function drawLine() {
        context.moveTo(0,0);
        context.lineWidth=5;
        context.strokeStyle="red";
       //直线中的点
        context.lineTo(500,300);
        // 结束
        context.stroke();

        // 新开始路径      context.restore恢复到上一次保存
        context.beginPath();
        context.moveTo(200,200);
        context.lineTo(500,300);
        context.lineWidth=5;
        context.strokeStyle="green";
        context.stroke();
    }

3.3矩形 ：
在这里插入图片描述

  // 画矩形
      function drawRect() {
                 //边框线
        context.strokeStyle="red";
        context.lineWidth=2;
        //坐标（x，y）宽高
        context.strokeRect(50,50,100,50);
        //填充
        context.fillStyle="green";
        //调用填充的方法  坐标（x，y）宽高
        context.fillRect(50,50,100,50);
      }

3.4弧度

   //画弧度
      function drawArc() {
          // arc 参数
          /*
          * 1, 圆心x 坐标 2,圆心y坐标 , 3.半径  4.开始的弧度  5.结束的弧度
          * 6. 绘制方向,true：逆时针，false:顺时针
          *
          * 注：角度和弧度的转换公式
          * 角度 = 弧度 * Math.PI /180
          * */
       context.arc(100,100,50,0,360*Math.PI/180,true);
       context.stroke();
      }

4. 图形的变换

 context.translate(x,y);  //平移
 context.scale(x,y); //放大
 context.rotate(x,y); //旋转

画布旋转
在这里插入图片描述

    function roate() {
        context.moveTo(0,0);
        context.lineTo(100,0);
        context.lineWidth=5;
        context.stroke();

        context.beginPath();
        context.rotate(30*Math.PI/180);
        context.moveTo(0,0);
        context.lineTo(100,0);
        context.lineWidth=5;
        context.stroke();


    }

 canvas 原理：
 双缓冲画布，一个用于显示给用户，一个内存中使用的，绘制图像时，都以内存画布为准，进行绘制  

     //画时钟:
     context.beginPath();
     context.closePath();
     context.restore(); //重复到上一次在保存
     context.save()

     context.clearRect();
  1. canvas 绘制图像
    //绘制图像
    //刷新后出现图像
    function drawImage() {
        // 参数：context.drawImage(img,x,y)
        // 参数：context.drawImage(img,x,y,height,width);  指定要绘制图像的宽高
        context.drawImage(img,0,0,50,50);
    }

在这里插入图片描述

     context.drawImage(img,x,y);  //img:图片对象  x: x坐标，y 
      context.drawImage(img,x,y,width,height);
      //img:图片对象  x: x坐标，y ，width:宽度， height:高

       context.drawImage(img,cut_x,cut_y,cut_width,cut_height , draw_x,draw_y,draw_width,draw_heigth);
  1. canvas vs svg(矢量)

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas
1.依赖分辨率
2.不支持事件处理器
3.弱的文本渲染能力
4.能够以 .png或 .jpg 格式保存结果图像
5.最适合图像密集型的游戏，其中的许
多对象会被频繁重绘

SVG
1.不依赖分辨率
2.支持事件处理器
3.最适合带有大型渲染区域的应用程序（比如谷歌地图）
4.复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
5.不适合游戏应用

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px red solid;
        }
    </style>
</head>
<body>
<!--canvas的宽高只能在标签中设置-->
<canvas id="myCanvas" height="300" width="500">

</canvas>
<img src="img/11.png" alt="" id="img" style="display: none">
<script type="text/javascript">
    let myCanvas = document.getElementById("myCanvas");
    // 得到cancas的上下文，调用对应属性和方法
    let context = myCanvas.getContext("2d");
    let img = document.getElementById("img");

    //调用绘制函数
    // drawLine();
    // drawJuXing();
    // drawYuan();
    roate();

    // drawImage();


    // context.clearRect(x,y,h,w);清除矩形

    //通过canvas画线（绘制图形）
    // 绘制直线
    function drawLine() {
        context.moveTo(0,0);
        context.lineWidth=5;
        context.strokeStyle="red";
       //直线中的点
        context.lineTo(200,200);
        // 结束
        context.stroke();

        // 新开始路径      context.restore恢复到上一次保存
        context.beginPath();
        context.moveTo(200,200);
        context.lineTo(500,300);
        context.lineWidth=5;
        context.strokeStyle="green";
        context.stroke();
    }

    //绘制矩形
    function drawJuXing() {
        //边框线
        context.strokeStyle="red";
        context.lineWidth=2;
        //坐标（x，y）宽高
        context.strokeRect(50,50,100,50);
        //填充
        context.fillStyle="green";
        //调用填充的方法  坐标（x，y）宽高
        context.fillRect(50,50,100,50);

    }

    // 绘制圆形（有弧度的）
    function drawYuan() {
        /*arc(圆心的x坐标,圆心的y坐标,半径,开始的弧度,结束的弧度,
        顺时针还是逆时针（true为逆时针，false为顺时针）)
        角度和弧度的转换：角度=弧度*Math.PI/180
        */
       context.arc(100,100,50,0,360*Math.PI/180,true);
       context.stroke();
    }

    //画布旋转
    //canvas双缓冲画布，一个给用户看，一个在内存中使用，绘制图像时，都以内存画布为准
    function roate() {
        context.moveTo(0,0);
        context.lineTo(100,0);
        context.lineWidth=5;
        context.stroke();

        context.beginPath();
        context.rotate(30*Math.PI/180);
        context.moveTo(0,0);
        context.lineTo(100,0);
        context.lineWidth=5;
        context.stroke();


    }

    //绘制图像
    //刷新后出现图像
    function drawImage() {
        // 参数：context.drawImage(img,x,y)
        // 参数：context.drawImage(img,x,y,height,width);  指定要绘制图像的宽高
        context.drawImage(img,0,0,50,50);
    }
</script>
</body>
</html>
Html5的Canva绘制动态时钟显示当前时间！！！（附源码）
yingshuangtu的博客
08-13 1207
前言 canvas设计一个显示当前时间的时钟 实现情况 思路 想让canvas绘制的东西动起来，最直接的办法就是不停的进行重绘，可能刚开始有些人会担心效率的问题，害怕代码过长冗余，可读性差的问题，实际上将绘制目标封装在函数中，然后放置函数在定时器中，每秒钟调用一次就可以实现 ， 首先是创建绘画环境 var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); 获取当前系统时间，使用的是Data
H5 cancas绘制径向渐变
04-22
用H5canvas绘制径向渐变
cancas html5
u011286208的专栏
06-25 1069
实现原理 1. canvas里面实现描边文字 2. 利用getImageData获得描边文字的像素矩阵 3. 将粒子效果绑定在描边文字上 整个效果如下。 html文件非常简单。   [html] view plaincopy      css文件如下。     [css] view plaincopy  
H5 canvas 简单学习
xinxiaoyong的博客
02-04 840
先看效果图： 下图为 直线，矩形，圆形，三角形部分；当点击清除后，消失。 下图为 二次方贝塞尔，三次方贝塞尔曲线图部分； 最终效果描述： 1.绘制直线； 2.绘制矩形； 3.绘制圆形； 4.绘制 实心三角形和空心三角形 5.清除当前画布内容； 6.绘制二次方贝塞尔曲线及控制线； 7.绘制三次方贝塞尔曲线及控制线； ================
cancas绘制折线图
weixin_33950035的博客
11-28 145
知识点回顾： 知识点1： measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。 提示：如果您需要在文本向画布输出之前，就了解文本的宽度，那么请使用该方法。 JavaScript 语法：context.measureText(text).width; text是要测量的文本； 知识点2：   illText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。   ...
html-canvas
m0_66711291的博客
04-12 2009
一、canvas基本概念 1 创建canvas标签，在标签内设置宽度和高度。 不支持canvas的浏览器会显示写在canvas内部的内容 <canvas id="canvas" width="600px" height="400px"> 浏览器不支持显示我 </canvas> 注意： canvas和img不同，没有src和alt属性 canvas的高度为150px，宽度为300px 不要在css中设置canvas的宽高，这样会导致绘图变形 如果想要让ca
HTML5 Cancas温度计样式特效.zip
11-18
HTML5 Canvas是一个强大的图形绘制工具，它允许网页开发者在页面上直接通过JavaScript代码进行像素级别的图形操作。这个“HTML5 Canvas温度计样式特效”压缩包很可能是包含了一个使用Canvas元素和相关JavaScript技术...
HTML5 Cancas温度计样式特效特效代码
03-20
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的视觉效果。在这个“HTML5 Canvas温度计样式特效”中，我们主要关注的是如何利用Canvas API来创建一个互动的、视觉吸引...
基于HTML5 Cancas的jQuery温度计插件
12-12
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，而无需依赖于外部插件或图像。"基于HTML5 Canvas的jQuery温度计插件"（jquery-plugin-tempgauge）正是利用了这个特性，提供了一种...
cancas绘制思维导图
weixin_42630688的博客
10-27 2193
<!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&l
canves.js（动态点线背景）
12-11
这是一个canves点线背景js,按需自取，用于设置动态背景。该资源并非是本人亲自所写，偶然所得，现分享与有需求者，若侵权，联系立撤。
H5--Canvas使用以及API
coding...
05-07 1811
Canvas前端绘图工具，Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。返回的CanvasGradient对象的addColorStop(offset, color)添加渐变颜色。canvas 搭配video。
HTML5&&canvs时钟
蜗牛的博客
01-16 449
canvas时钟 div{ text-align:center; } #clock{ border:1px solid #ccc; } var dom=document.getElementById('clock');//调取ID var ctx=dom.getContext('2d');//获取canvas上下文 var
html5中canvs的作用,HTML5中Canvas如何使用？Canvas实例用法总结
weixin_30075701的博客
07-15 335
jq-signature.js是一个帮助你创建签名的jQuery插件，允许你的用户使用鼠标，手指或者铅笔生成签名。下面这篇文章主要给大家介绍了利用html5+canvas实现支持触屏的签名插件的相关资料，需要的朋友可以参考下。前言大家在日常开发中使用该jQuery插件来制作在线签名，用户绘制的东西以图片的形式保存下来，非常方便实用。下面将实现支持的方法分享给大家，供大家参考学习，下面来一起看看详细...
cancas和SVG的是什么以及区别
weixin_41821630的博客
10-01 623
SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。 在 c...
canvas画布
qq_44681872的博客
02-02 491
H5学习推荐网站：https://www.runoob.com/html/html5-websocket.html 一、Canvas介绍 canvas为H5新增元素，其本身为一个画布，但是用js当做画笔动态渲染，画笔工具为getContext(‘2d’) 标签,默认用行内样式设置样式，若用style进行设置，会发生变形。其本身默认宽高为300*150 <canvas id="mycanvas" width="500" height="500" style="border: 1px soli
HTML如何转化为canvas教程
热门推荐
翾的博客
08-02 1万+
序言: 上个月换工作了, 从网易来到了阿里巴巴, 感觉同事都是冰冷; 也知道了研发工程师和开发工程师的区别; 现在冒出了想去读研学算法和AI的打算. 预览图 老规矩, 先放图 第一个红格子是DOM渲染的, 第二个带边框的红格子是用html的代码在canvas画出来的, 没有使用canvas的api哦. 本文最后贴出了代码. 原理 本文转化的实现, 以及本文下半部分所介绍的ht...
uni-app 写小程序 用cancas画图保存海报
最新发布
onion_line的博客
12-31 133
运行环境 微信小程序。
Canvas 从入门到劝朋友放弃（图解版）✨
weixin_39415598的博客
07-23 6170
本文简介 点赞 + 关注 + 收藏 = 学会了 在前端领域，如果只是懂 Vue 或者 React ，未来在职场的竞争力可能会比较弱。 根据我多年在家待业经验来看，前端未来在 数据可视化 和 AI 这两个领域会比较香，而 Canvas 是数据可视化在前端方面的基础技术。 本文就用光的速度将 canvas 给入门了。 要入门一个技术，前期最重要是快！所以本文只讲入门内容，能应付简单项目。深入的知识点会在其他文章讲解。 Canvas 是什么？ Canvas 中文名叫 “画布”，是 HTML5 新增
HTML5 Canvas深度解析与实战教程
"HTML5 Canvas全解教程" HTML5 Canvas是HTML5标准中引入的一个强大特性，它为网页开发者提供了在浏览器内动态绘制图形的能力。Canvas元素是这个功能的核心，它是一个基于矢量图形的画布，允许通过JavaScript进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值