5分钟搞懂canvas画图 canvas 画图

myzbx 2024-12-26 15:18 43 浏览

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

目前，前端绘图业界有两大主流技术：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>

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

HTML5 画布 vs SVG

上一篇：Canvas 从入门到劝朋友放弃(图解版)
下一篇：HTMLCSS学习笔记(十九)——媒体查询

5分钟搞懂canvas画图 canvas 画图

canvas 基本概念

canvas 语法学习

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿