CANVAS(canvas)的基本使用

无足鸟丶

于 2024-02-04 15:39:43 发布

阅读量145

点赞数 4

文章标签： javascript

本文链接：https://blog.csdn.net/qq_45089709/article/details/136027180

版权

CANVAS(canvas)的基本使用

在JavaScript中，可以使用HTML5提供的Canvas元素来进行绘图和图形处理。以下是使用Canvas的基本步骤：

在HTML文件中创建Canvas元素：

<canvas id="myCanvas"></canvas>

在JavaScript代码中获取对Canvas的引用，并获取绘图上下文（context）：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

使用上下文对象进行绘图操作，例如绘制矩形、圆形、直线等：

// 绘制矩形
ctx.fillStyle = 'red';  // 设置填充颜色
ctx.fillRect(x, y, width, height);  // 绘制填充矩形

// 绘制圆形
ctx.beginPath();  // 开始路径
ctx.arc(x, y, radius, startAngle, endAngle);  // 绘制圆弧
ctx.fillStyle = 'blue';  // 设置填充颜色
ctx.fill();  // 填充圆形

// 绘制直线
ctx.beginPath();
ctx.moveTo(x1, y1);  // 移动到起点
ctx.lineTo(x2, y2);  // 划线到终点
ctx.strokeStyle = 'green';  // 设置线条颜色
ctx.stroke();  // 绘制线条

可以结合事件处理程序实现交互，例如鼠标点击事件：

canvas.addEventListener('click', function(event) {
    var mouseX = event.clientX - canvas.offsetLeft;  // 鼠标点击位置相对于Canvas的X坐标
    var mouseY = event.clientY - canvas.offsetTop;   // 鼠标点击位置相对于Canvas的Y坐标
    // 在点击位置绘制一个圆形
    ctx.beginPath();
    ctx.arc(mouseX, mouseY, 10, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();
});

这只是Canvas的基本用法，你可以使用更多的Canvas API来创建复杂的图形和动画效果。需要注意的是，Canvas的绘图操作都是基于像素的，所以在进行绘制之前，你可能需要先了解Canvas的坐标系统和像素概念。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
</body>

</html>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    // 绘制矩形
    ctx.fillStyle = 'red';  // 设置填充颜色
    ctx.fillRect(10, 10, 10, 10);  // 绘制填充矩形

    // 绘制圆形
    ctx.beginPath();  // 开始路径
    ctx.arc(50, 100, 10, 0, 2 * Math.PI);  // 绘制圆弧
    ctx.fillStyle = 'blue';  // 设置填充颜色
    ctx.fill();  // 填充圆形

    // 绘制直线
    ctx.beginPath();
    ctx.moveTo(30, 30);  // 移动到起点
    ctx.lineTo(100, 100);  // 划线到终点
    ctx.strokeStyle = 'green';  // 设置线条颜色
    ctx.stroke();  // 绘制线条
    canvas.addEventListener('click', function (event) {
        var mouseX = event.clientX - canvas.offsetLeft;  // 鼠标点击位置相对于Canvas的X坐标
        var mouseY = event.clientY - canvas.offsetTop;   // 鼠标点击位置相对于Canvas的Y坐标
        // 在点击位置绘制一个圆形
        ctx.beginPath();
        ctx.arc(mouseX, mouseY, 10, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();
    });
</script>

在这里插入图片描述

无足鸟丶

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CANVAS(canvas)的基本使用

这只是Canvas的基本用法，你可以使用更多的Canvas API来创建复杂的图形和动画效果。需要注意的是，Canvas的绘图操作都是基于像素的，所以在进行绘制之前，你可能需要先了解Canvas的坐标系统和像素概念。在JavaScript中，可以使用HTML5提供的Canvas元素来进行绘图和图形处理。
复制链接

扫一扫