2.1 HTML5 - Canvas标签

文章目录

引言

大家好,今天我们要一起探索HTML5中一个非常有趣且强大的特性------Canvas。我们将通过几个实例来了解如何使用Canvas标签,获取其上下文,绘制基本图形,以及实现渐变效果。让我们开始吧!

Canvas标签概述

定义

<canvas>标签是HTML5中用于绘制图形的元素。它提供了一个空白画布,通过JavaScript进行绘制。该标签本身不绘制任何图形,而是作为图形的容器。

实例:创建画布

我们来看一个简单的例子,创建一个200x150像素的画布,并给它一个紫色的边框。

html 复制代码
<canvas id="myCanvas" width="200" height="150" style="border: 1px solid #ff00ff;">
    您的浏览器不支持HTML5 canvas标签~
</canvas>

理解Canvas坐标系

概述

Canvas元素使用一个二维坐标系统来确定画布上的绘制位置。原点(0,0)位于画布的左上角,水平向右为x轴正方向,垂直向下为y轴正方向。

实例:获取Canvas坐标

我们可以使用JavaScript来捕获鼠标在Canvas上的坐标,并在页面上显示它们。

html 复制代码
<div id="box" style="width: 200px; height: 200px; border: 1px solid #ff0000"
     onmousemove="getCoordinates(event)" onmouseout="clearCoordinates()">
</div>
<div id="xy_coordinates"></div>

<script>
    function getCoordinates(e) {
        var x = e.clientX;
        var y = e.clientY;
        document.getElementById("xy_coordinates").innerHTML = "Coordinates: (" + x + ", " + y + ")";
    }
    
    function clearCoordinates() {
        document.getElementById("xy_coordinates").innerHTML = "";
    }            
</script>

获取Canvas环境上下文

概述

Canvas环境上下文,通常指的是Canvas 2D渲染上下文,是HTML5 Canvas中用于绘制图形、文本、图像和其他对象的主要接口。

实例:获取Canvas上下文

让我们获取Canvas的2D上下文,并绘制一个简单的黄色矩形。

html 复制代码
<canvas id="myCanvas" width="200" height="150" style="border: 1px solid #ff00ff;">
    您的浏览器不支持HTML5 canvas标签~
</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#ffff00";
    ctx.fillRect(10, 10, 180, 130);
</script>

设置渐变色效果

我们可以创建一个线性渐变,从蓝色到黄色,并填充一个矩形。

html 复制代码
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var gradient = ctx.createLinearGradient(0, 0, c.width, c.height);
    gradient.addColorStop(0, 'blue');
    gradient.addColorStop(1, 'yellow');
    ctx.fillStyle = gradient;
    ctx.fillRect(10, 10, 180, 130);
</script>

结语

通过今天的实战,我们学习了如何使用HTML5 Canvas来绘制基本图形,理解其坐标系,并获取上下文以绘制更复杂的图形。Canvas是一个强大的工具,可以用来创建各种动态和交互式的图形和动画。

相关推荐
xcLeigh17 小时前
HTML5好看的水果蔬菜在线商城网站源码系列模板7
前端·html·html5
航Hang*1 天前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm
wuhen_n1 天前
CSS元素动画篇:基于当前位置的变换动画(一)
前端·css·html·css3·html5
一只小风华~1 天前
Web前端开发:CSS Float(浮动)与 Positioning(定位)
前端·css·html·html5·web
听风吹等浪起1 天前
html5:从零构建经典游戏-扫雷游戏
前端·html·html5
航Hang*2 天前
WEBSTORM前端 —— 第2章:CSS —— 第2节:文字控制属性与CSS特性
前端·css·css3·html5·webstorm
程序员Bears2 天前
HTML5 新特性详解:语义化标签、表单与音视频嵌入
前端·html·html5·visual studio code
神秘代码行者2 天前
使用Hash和HTML5的History API实现前端路由
前端·html5
TT模板3 天前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5