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>
相关文章
|
2月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
54 0
|
5天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
35 19
|
5天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
27 13
|
5天前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
29天前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
16天前
|
移动开发 开发者 HTML5
构建你的首个个人网站:HTML基础入门
【8月更文挑战第29天】在数字化时代,拥有一个个人网站是展示自我、分享知识和技能的窗口。本文将引导你通过简单的步骤,使用HTML构建你的第一个个人网站。我们将探索HTML的基础标签,页面结构,以及如何将这些元素融合在一起创建一个简单的网页。无论你是编程新手还是希望扩展你的技术工具箱,这篇文章都提供了一条清晰的路径,帮助你开始你的网站开发之旅。
|
23天前
|
Dart 前端开发 Java
|
3月前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
29 3
|
3月前
|
数据安全/隐私保护
杨老师课堂之网页制作HTML的学习入门-含有案例2
杨老师课堂之网页制作HTML的学习入门-含有案例
19 0