百度360必应搜狗淘宝本站头条
mqtt服务器xftp6mybatiscollectionkeyerrorc#var
当前位置：网站首页 > 热门文章 > 正文

5分钟搞懂canvas画图

bigegpt 2025-01-16 18:04 23 浏览

【写在最前】
我们在平时的前端编程学习中，经常会接触到“网页绘图”这个概念；

目前，前端绘图业界有两大主流技术：canvas 和 svg

今天，让我们花5分钟时间先搞懂第一个：canvas

通过本文知识，相信聪明的你，看完一定会有收获！


canvas 基本概念

定义：是一种通过js脚本绘制路径、文字，图像的html5标签。
兼容性：所有现代浏览器，IE9.0+
注意：
1）canvas本身不具备绘图功能，必须借助 js 脚本实现。
2）width 和 height 属性值必须是 px，否则会被忽略处理


canvas 语法学习


先来一张“网页绘图”的效果图：


废话不多说，直接看语法代码：（每一行都有注释，确保也能小白完全掌握）

<body>
    <img id="myImg" src="avatar.png" width="50" height="50" style="display: none">
    
    <canvas id="myCanvas" class="myCanvas" style="border: 1px solid #ccc;">
        Sorry，您的浏览器不支持 HTML5 canvas 标签。
    canvas>
</body>


<script> 
    var canvas = document.querySelector('#myCanvas'); //获得画布  
    canvas.width = 600;  //设置画布的宽
    canvas.height = 300; //设置画布的高

    var ctx = canvas.getContext('2d'); //获得ctx上下文对象（ctx具备各种图形API方法）

    //画红色水平线段
    ctx.moveTo(200, 280); //定义线段起点
    ctx.lineTo(400, 280); //定义线段终点（因为X轴坐标不一样，Y轴一样，所以是水平线段）
    ctx.strokeStyle = "#FF0000";//定义画笔颜色
    ctx.stroke(); //给线段路径描边（否则不可见）
    ctx.closePath(); //闭合路径

    //画绿色边框矩形
    ctx.strokeStyle = "#00FF00";//定义画笔颜色
    ctx.strokeRect(50, 50, 100, 50);
    ctx.closePath(); //闭合路径

    //画蓝色实心框矩形
    ctx.fillStyle = "#0000FF";//定义画笔颜色
    ctx.fillRect(200, 50, 100, 50);
    ctx.closePath(); //闭合路径

    //画渐变矩形
    // 先创建“线性”渐变
    var grd = ctx.createLinearGradient(300, 50, 500, 50);  //createRadialGradient 是径向渐变
    grd.addColorStop(0, "white");
    grd.addColorStop(1, "red");
    // 后填充渐变
    ctx.fillStyle = grd;
    ctx.fillRect(350, 50, 100, 50);


    //画红色圆形
    ctx.fillStyle = "#FF0000";
    ctx.arc(550, 75, 27, 0, 2 * Math.PI); //四个参数分别为：x,y,r半径，开始角度（3点钟方向为0度角），结束角度（2π表示360度）（即画一个整圆）
    ctx.fill();

    //画实心文字
    ctx.font = "30px Arial";
    ctx.fillText("Hello Html5 Canvas", 180, 250); //strokeText 是空心文字

    //画一副图像
    var img = document.getElementById("myImg");
    ctx.drawImage(img, 300, 150); 

</script>



【全文完】
--------------------------------
十年技术沉淀，只做原创文章；
及时关注作者，成就大牛之路！

相关推荐

10w qps缓存数据库——Redis（redis缓存调优）

一、Redis数据库介绍：Redis：非关系型缓存数据库nosql：非关系型数据库没有表，没有表与表之间的关系，更不存在外键存储数据的形式为key：values的形式c语言写的服务（监听端口），用来存...

Redis系列专题4--Redis配置参数详解

本文基于windowsX64，3.2.100版本讲解，不同版本默认配置参数不同在Redis中，Redis的根目录中有一个配置文件（redis.conf，windows下为redis.windows....

开源一夏 | 23 张图，4500 字从入门到精通解释 Redis

redis是目前出场率最高的NoSQL数据库，同时也是一个开源的数据结构存储系统，在缓存、数据库、消息处理等场景使用的非常多，本文瑞哥就带着大家用一篇文章入门这个强大的开源数据库——Redis。...

redis的简单与集群搭建（redis建立集群）

Redis是什么？是开源免费用c语言编写的单线程高性能的（key-value形式）内存数据库，基于内存运行并支持持久化的nosql数据库作用主要用来做缓存，单不仅仅是做缓存，比如：redis的计数器生...

推荐几个好用Redis图形化客户端工具

RedisPlushttps://gitee.com/MaxBill/RedisPlusRedisPlus是为Redis可视化管理开发的一款开源免费的桌面客户端软件，支持Windows、Linux...

关于Redis在windows上运行及fork函数问题

Redis在将数据库进行持久化操作时，需要fork一个进程，但是windows并不支持fork，导致在持久化操作期间，Redis必须阻塞所有的客户端直至持久化操作完成。微软的一些工程师花费时间在解决在...

你必须懂的Redis十大应用场景（redis常见应用场景）

Redis作为一款高性能的键值存储数据库，在互联网业务中有着广泛的应用。今天，我们就来详细盘点一下Redis的十大常用业务场景，并附上Golang的示例代码和简图，帮助大家更好地理解和应用Redis。...

极简Redis配置（redis的配置）

一、概述Redis的配置文件位于Redis安装目录下，文件名为redis.conf(Windows名为redis.windows.conf，linux下的是redis.conf)你可以通过C...

什么是redis，怎么启动及如何压测

从今天起咱们一起来学习一下关于“redis监控与调优”的内容。一、Redis介绍Redis是一种高级key-value数据库。它跟memcached类似，不过数据可以持久化，而且支持的数据类型很丰富。...

一款全新Redis UI可视化管理工具，支持WebUI和桌面——P3X Redis UI

介绍P3XRedisUI这是一个非常实用的RedisGUI，提供响应式WebUI访问或作为桌面应用程序使用，桌面端是跨平台的，而且完美支持中文界面。Githubhttps://github....

windows系统的服务器快速部署java项目环境地址

1、mysql:https://dev.mysql.com/downloads/mysql/（msi安装包）2、redis:https://github.com/tporadowski/redis/r...

window11 下 redis 下载与安装（windows安装redis客户端）

#热爱编程是一种怎样的体验#window11下redis下载与安装1）各个版本redis下载(windows)https://github.com/MicrosoftArchive/r...

一款轻量级的Redis客户端工具，贼好用!

使用命令行来操作Redis是一件非常麻烦的事情，我们一般会选用客户端工具来操作Redis。今天给大家分享一款好用的Redis客户端工具TinyRDM，它的界面清新又优雅，希望对大家有所帮助！简介Ti...

一个.NET开发且功能强大的Windows远程控制系统

我们致力于探索、分享和推荐最新的实用技术栈、开源项目、框架和实用工具。每天都有新鲜的开源资讯等待你的发现！项目介绍SiMayRemoteMonitorOS是一个基于Windows的远程控制系统，完...

Redis客户端工具详解(4款主流工具)

大家好，我是mikechen。Redis是大型架构的基石，也是大厂最爱考察内容，今天就给大家重点详解4款Redis工具@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题合集...

一周热门
最近发表
标签列表