html:canvas画布绘图简单入门-2

简介: html:canvas画布绘图简单入门-2

分辨率和元素尺寸

<canvas 
  width="600" 
  height="700" 
  style="width:800px; height:900px">
</canvas>

内容分辨率: 600 * 700

元素尺寸: 800 * 900


示例6:将元素截取后返回画布

像素操作

getImageData()

createImageData()

putImageData()

image.png



<canvas id="canvas"
            width="600"
            height="600"></canvas>
<script>
    let canvas = document.querySelector('#canvas');
    let ctx = canvas.getContext('2d');
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 50, 50);
    let imageData = ctx.getImageData(0, 0, 50, 50);
    console.log(imageData);
    // 转换元素的颜色数组 RGBA  [红色, 绿色, 蓝色, alpha通道]
    // [255, 0, 0, 255]  => [0, 255, 255, 255]
    for (let i = 0; i< imageData.data.length; i += 4) {
        imageData.data[i] = 255 - imageData.data[i];
        imageData.data[i + 1] = 255 - imageData.data[i + 1];
        imageData.data[i + 2] = 255 - imageData.data[i + 2];
        imageData.data[i + 3] = 255;
    }
    console.log(imageData);
    ctx.putImageData(imageData, 100, 0);
</script>

示例7:移动坐标原点

image.png


<canvas id="canvas"
            width="600"
            height="600"></canvas>
    <script>
        let canvas = document.querySelector('#canvas');
        let ctx = canvas.getContext('2d');
        ctx.fillStyle = "red";
        ctx.fillRect(0, 0, 50, 50);
        // 移动原点坐标(0, 0) => (100, 0)
        ctx.translate(100, 0);
        ctx.fillStyle = "green";
        ctx.fillRect(0, 0, 50, 50);
    </script>

示例8:旋转坐标轴

image.png


<canvas id="canvas"
            width="600"
            height="600"></canvas>
    <script>
        let canvas = document.querySelector('#canvas');
        let ctx = canvas.getContext('2d');
        // 将坐标轴顺时针旋转45角
        ctx.rotate(Math.PI / 180 * 45);
        ctx.fillStyle = "red";
        ctx.fillRect(25, -25, 50, 50);
    </script>

示例9:缩放坐标轴


image.png

<canvas id="canvas"
            width="600"
            height="600"></canvas>
    <script>
        let canvas = document.querySelector('#canvas');
        let ctx = canvas.getContext('2d');
        ctx.fillStyle = "red";
        ctx.fillRect(0, 0, 50, 50);
        // 保存画笔状态
        ctx.save()
        // 坐标轴x, y都放大两倍
        ctx.scale(2, 2);
        ctx.fillStyle = "green";
        ctx.fillRect(50, 0, 50, 50);
        // 恢复画笔状态
        ctx.restore()
        ctx.fillRect(250, 0, 50, 50);
    </script>
相关文章
|
4天前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
14 4
|
4天前
|
移动开发 前端开发 HTML5
HTML5 Canvas发光Loading源码
一款基于HTML5 Canvas的发光Loading加载HTML源码。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果
14 1
HTML5 Canvas发光Loading源码
|
4天前
|
移动开发 前端开发 HTML5
Canvas实现超酷Loading动画HTML代码
之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。
12 1
Canvas实现超酷Loading动画HTML代码
|
4天前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
|
4天前
|
移动开发 前端开发 HTML5
【专栏:HTML 基础篇】HTML 入门:从零开始构建你的第一个网页
【4月更文挑战第30天】本文引导初学者从零开始学习HTML,了解这种标记语言用于构建网页的基础知识。通过介绍HTML的基本结构,如文档类型声明、根标签、头部和主体,以及如何添加文本、设置标题、插入图片、创建链接、使用列表、制作表格和设计表单,帮助读者构建第一个网页。同时强调,结合CSS可实现网页的美化。
|
4天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
28 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
4天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
38 0
|
4天前
|
移动开发 自然语言处理 前端开发
《HTML 简易速速上手小册》第1章:HTML 入门(2024 最新版)
《HTML 简易速速上手小册》第1章:HTML 入门(2024 最新版)
19 0
|
移动开发 前端开发 API
《HTML5 Canvas游戏开发实战》——3.4 小结
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.4节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
942 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.3 自定义画板
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.3节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1298 0