canvas入门笔记（上）

Canvas

Canvas简介

Canvas API 提供了一个通过JavaScript 和 HTML的``元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

Canvas使用

在HTML页面当中新建一个画板

<canvas id="cont">
 /*此处书写内容在高版本浏览器内无内容*/
</canvas>

Step1

获取画布（必须使用原生js获取）

var canvas =document.querySelector('#cont')

Step2

获取画布上下文

var content =canvas.getContext('2d');

Step3

开启一条路径

content.beginPath();

Step4

确定画布起始点

content.moveTo(100,100);

Step5

确定画布结束点

content.lineTO(400,400);

Step6

着色

content.stroke()

Step

结束路径

content.closePath();

Canvas画直线

默认直线

<style>
    #myline{
        border: 1px solid black;
    }
</style>
<body>
    <canvas id="myline" width="500" height="500">

    </canvas>
</body>
<script>
    //获取画布
    var canvas=document.querySelector("#myline");

    //获取上下文
    var ct =canvas.getContext('2d');
    //开始一条路径
    ct.beginPath();
    //画画起点
    ct.moveTo(100,100);
    //画画结束点
    ct.lineTo(400,400);

    //着色
    ct.stroke();
    //关闭路径
    ct.closePath();

</script>

效果图

在这里插入图片描述

自定义直线

在着色前 添加以下代码

//线条颜色
ct.strokeStyle='green';
//线条宽度
ct.lineWidth=5

完整代码

<style>
    #myline{
        border: 1px solid black;
    }
</style>
<body>
    <canvas id="myline" width="500" height="500">

    </canvas>
</body>
<script>
    //获取画布
    var canvas=document.querySelector("#myline");

    //获取上下文
    var ct =canvas.getContext('2d');
    //开始一条路径
    ct.beginPath();
    //画画起点
    ct.moveTo(100,100);
    //画画结束点
    ct.lineTo(400,400);
    //着色前添加
        //设置线条颜色
    ct.strokeStyle='green'
        //设置线条粗细
    ct.lineWidth=5;

    //着色
    ct.stroke();
    //关闭路径
    ct.closePath();

</script>

效果图

在这里插入图片描述

Canvas画矩形

绘制实心矩形

矩形样式

ct.fillStyle='red';
//
ct.fillRect(200,200,20,200)

效果图

在这里插入图片描述

绘制空心矩形

ct.strokeRect(180,200,20,200)

效果图

在这里插入图片描述

画随机柱形统计图

  ct.fillStyle='red';
    for(var i=0;i<7;i++){
        var height =Math.random()*180+10;
        ct.fillRect(120+i*40,300-height,20,height)
    }

效果图

在这里插入图片描述

随机颜色统计图

ct.fillStyle='#'+parseInt(Math.random()*0xffffff).toString(16)

效果图

在这里插入图片描述

清除画布

ct.clearRect(x,y,width,height);

首先画一个矩形

<style>
    #mycanvas{
        display: block;
        border: 1px solid black;
        margin: 0 auto ;
    }
</style>
<body>
    <canvas id="mycanvas" width="500" height="500"> </canvas>
</body>
<script>

    var canvas =document.querySelector('#mycanvas');
    var ct =canvas.getContext('2d');

    ct.fillStyle='green'
    ct.fillRect(200,200,200,200);
    //清除画布内容
    ct.clearRect(210,230,100,100)
</script>

效果图

在这里插入图片描述

Canvas圆与圆弧

圆

方法

ct.arc(x,y,radius,startAngle,endAngle,countclockwish)

/*
	x:中心点坐标x
	y:中心的坐标y
	radius:半径
	startAngle:开始的角度
	endAngle:结束的角度
	conutclockwish:旋转方向 false 顺时针，true逆时针
*/

在这里插入图片描述

0度起始点

画一个圆

<style>
    #mycanvas{
        margin: 0 auto;
        border: 1px solid black;
        display: block;
    }
</style>
<body>
    <canvas id="mycanvas" width="500" height="500"></canvas>
</body>
<script>
    var canvas =document.querySelector("#mycanvas");

    var ct =canvas.getContext('2d');
    ct.beginPath()
    ct.arc(255,255,50,0,Math.PI*2,true)
    
    ct.fillStyle='green'   //填充样式
    ct.fill()			//填充
    ct.lineWidth='5'		
    ct.stroke();
</script>

效果图

在这里插入图片描述

圆弧

  var canvas =document.querySelector("#mycanvas");

    var ct =canvas.getContext('2d');
    ct.beginPath()
	ct.lineWidth='5'
    ct.arc(255,400,50,1,2,false)
    ct.stroke()

效果图

在这里插入图片描述

Canvas画茶杯Demo

	var canvas =document.querySelector('#mycanvas');
    var ct=canvas.getContext('2d');

    //画一个茶杯

    ct.beginPath();
    ct.moveTo(100,200)
    ct.lineTo(100,450)
    ct.lineTo(300,450)
    ct.lineTo(300,200)
    ct.lineTo(100,200)
    ct.lineWidth='3'

    ct.stroke();
    ct.closePath();

    //画一个茶杯手柄
    ct.beginPath();
    ct.arc(300,325,50,-(Math.PI/2),Math.PI/2,false)
    ct.lineWidth='3'
    ct.stroke()
    ct.closePath();

    //热气
    
    for(var i=0 ;i<4;i++){
        ct.beginPath();
        ct.arc(120+60*i,100,20,-Math.PI/2,Math.PI/2,true)
        ct.arc(120+60*i,140,20,-Math.PI/2,Math.PI/2,false)
        ct.stroke()
    }

效果图

在这里插入图片描述

Canvas圆环加载条

var canvas =document.querySelector('#mycanvas');
    var ct=canvas.getContext('2d');


    var fnb=Math.PI/180;
    var db=0;
    
    var a=setInterval(()=>{
        // console.log(fnb)
        db+=fnb;
        drowpic(db)
        if(db>Math.PI*2){
            clearTimeout(a)
        }
    },100)
   
   var drowpic=function(fnb){
    ct.beginPath();
    ct.lineWidth='5'
    ct.strokeStyle='red'
    ct.arc(300,300,50,0,fnb,false);
    ct.stroke();
    ct.closePath();
   }

效果图

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

Canvas碰撞小球

    var canvas =document.querySelector('#mycanvas');
    var ct=canvas.getContext('2d');

    // 画布大小
    var h=500;
    var w=500;
    //初始化
    var x=40;
    var y=50

    //速度
    var speedx=5;
    var speedy=5;

    setInterval(function(){

        ct.clearRect(0,0,w,h)
        x+=speedx;
        y+=speedy;

        if(x<=30 || x>=(w-50)){
        speedx=-speedx;
        }
        if(y<=50 ||y>=(h-50)){
            speedy= -speedy
        }
        ct.beginPath();
        ct.arc(x,y,30,0,Math.PI*2,false)
        ct.strokeStyle='green';
        ct.fillStyle='green'
        ct.fill();
        ct.stroke();
    },10)

效果图

在这里插入图片描述

动态

Canvas面向对象小球碰撞

    var canvas =document.querySelector('#mycanvas');
    var ct=canvas.getContext('2d');


    var h=500;
    var w=500;

    //定义一个随机产生器
    var ran=function(num){
        return Math.random()*num;
    }


    //定义Ball球类
    var Ball=function(){
        //Ball球类属性=/初始点X，初始点Y，半价radius，颜色Color，水平速度Xspeed，垂直速度Yspeed
        this.x=50;
        this.y=50;
        this.radius=ran(20)+10;     //大小[10-30]
        this.color='#'+parseInt(ran(0xffffff)).toString(16);
        this.Xspeed=ran(4)+2;     //速度[2-6]
        this.Yspeed=ran(5)+2      //速度[2-7]
    }

    //放入页面的方法
    Ball.prototype.show= function(){
        //运动
        this.run();

        ct.beginPath();
        ct.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
        ct.fillStyle=this.color;
        ct.fill();
        ct.stroke();
    }

    //运动方法
    Ball.prototype.run=function(){
        if(this.x<=30 || this.x>=(w-30)){
            this.Xspeed=-this.Xspeed;
        }
        this.x+=this.Xspeed;
        if(this.y<=30 ||this.y>=(h-30)){
            this.Yspeed= -this.Yspeed;
        }
        this.y+=this.Yspeed;
    }


    //定义一个数组存放小球
    var ballArray=[];
    for(var i=1;i<=5;i++){
        var ball=new Ball();

        ballArray.push(ball);

        ball.show();
    }

    //运动
    setInterval(()=>{
        ct.clearRect(0,0,w,h);
        for(var j=0;j<ballArray.length;j++){
            var ball= ballArray[j];
            ball.show();
        }

    },50)

效果图

在这里插入图片描述

在这里插入图片描述

随机跳动

Canvas画文字

ct.fillText('hello',200,200)

实心文字

   var canvas =document.querySelector('#mycanvas');
    var ct=canvas.getContext('2d');
    ct.fillStyle='red'
    ct.font='100px 微软雅黑'
    ct.fillText('Hello',200,200,50);

效果图

在这里插入图片描述

空心文字

 var canvas =document.querySelector('#mycanvas');
    var ct=canvas.getContext('2d');
    ct.fillStyle='red'
    ct.font='100px 微软雅黑'
    ct.fillText('Hello',200,200);
    
    //空心文字
    ct.strokeStyle='yellow'
    ct.strokeText('Hello',100,100)

效果图

在这里插入图片描述

,200)


### 实心文字

~~~js
   var canvas =document.querySelector('#mycanvas');
    var ct=canvas.getContext('2d');
    ct.fillStyle='red'
    ct.font='100px 微软雅黑'
    ct.fillText('Hello',200,200,50);

效果图

[外链图片转存中…(img-zwbvQoiY-1703316803433)]

空心文字

 var canvas =document.querySelector('#mycanvas');
    var ct=canvas.getContext('2d');
    ct.fillStyle='red'
    ct.font='100px 微软雅黑'
    ct.fillText('Hello',200,200);
    
    //空心文字
    ct.strokeStyle='yellow'
    ct.strokeText('Hello',100,100)

效果图

[外链图片转存中…(img-9SyJQL5A-1703316803433)]

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/268364.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

抠图、换背景、正装图证件照制作方法

抠图、换背景、正装图证件照制作方法

本篇灵感是最近又要使用别的底色的正装照的图片。上学的时候&#xff0c;要求证件照的底色是蓝底、党员档案里要求图片的底色是红底、 将来上班的证件照要求是白底&#xff0c;并且无论是考研还是找工作都是制作简历的时候&#xff0c;根据简历的样板不同需要更换不同的底色。 …
阅读更多...
Webpack基础使用

Webpack基础使用

目录 一.什么是Webpack 二.为什么要使用Webpack 三.Webpack的使用 1.下载yarn包管理器 2.Webpack的安装 3.Webpack的简单使用 4.效果 四.Webpack打包流程 一.什么是Webpack Webpack是一个静态模块打包工具 二.为什么要使用Webpack 在开发中&#xff0c;我们常常会遇到…
阅读更多...
[Linux] Mysql数据库中的用户管理与授权

[Linux] Mysql数据库中的用户管理与授权

一、登录用户的管理 1.1 查看用户密码的信息 用户信息存放在 mysql 数据库下的 user 表&#xff08;MySQL 服务下存在一个系统自带的 mysql 数据库&#xff09;。 use mysql ; show tables; desc user; 查看密码信息的命令&#xff1a; 能看到密码信息&#xff1a;是经过加…
阅读更多...
【大数据】NiFi 的基本使用

【大数据】NiFi 的基本使用

NiFi 的基本使用 1.NiFi 的安装与使用1.1 NiFi 的安装1.2 各目录及主要文件 2.NiFi 的页面使用2.1 主页面介绍2.2 面板介绍 3.NiFi 的工作方式3.1 基本方式3.2 选择处理器3.3 组件状态3.4 组件的配置3.4.1 SETTINGS&#xff08;通用配置&#xff09;3.4.2 SCHEDULING&#xff0…
阅读更多...
饥荒Mod 开发(二二)：显示物品信息

饥荒Mod 开发(二二)：显示物品信息

饥荒Mod 开发(二一)&#xff1a;超大便携背包&#xff0c;超大物品栏&#xff0c;永久保鲜 饥荒中的物品没有详细信息&#xff0c;基本上只有一个名字&#xff0c;所以很多物品的功能都不知道&#xff0c;比如浆果吃了也不知道恢复什么&#xff0c; 采集的胡萝卜也不知道什么功…
阅读更多...
Airbert: In-domain Pretraining for Vision-and-Language Navigation

Airbert: In-domain Pretraining for Vision-and-Language Navigation

题目&#xff1a;Airbert&#xff1a;视觉和语言导航的域内预训练 摘要 为了解决VLN数据集稀缺的问题&#xff0c;本文创建了一个数据集BNB。我们首先从在线租赁市场的数十万个列表中收集图像标题 (IC) 对。接下来&#xff0c;我们使用 IC 对提出自动策略来生成数百万个 VLN …
阅读更多...
OpenCV与YOLO学习与研究指南

OpenCV与YOLO学习与研究指南

引言 OpenCV是一个开源的计算机视觉和机器学习软件库&#xff0c;而YOLO&#xff08;You Only Look Once&#xff09;是一个流行的实时对象检测系统。对于大学生和初学者而言&#xff0c;掌握这两项技术将大大提升他们在图像处理和机器视觉领域的能力。 基础知识储备 在深入…
阅读更多...
Apache Commons IO: 简化文件和IO操作

Apache Commons IO: 简化文件和IO操作

第1章&#xff1a;引言 咱们在做Java编程的时候&#xff0c;经常会遇到各种文件操作和输入输出&#xff08;IO&#xff09;的问题。不论是读取一个配置文件&#xff0c;还是把数据写入日志&#xff0c;这些看似简单的任务有时候会让人头疼。传统的Java IO操作&#xff0c;虽然…
阅读更多...
Odoo16 实用功能之Form视图详解（表单视图）

Odoo16 实用功能之Form视图详解（表单视图）

目录 1、什么是Form视图 2、Form视图的结构 3、源码示例 1、什么是Form视图 Form视图是用于查看和编辑数据库记录的界面。每个数据库模型在Odoo中都有一个Form视图&#xff0c;用于显示该模型的数据。Form视图提供了一个可编辑的界面&#xff0c;允许用户查看和修改数据库记…
阅读更多...
设计模式--迭代器模式

设计模式--迭代器模式

实验18&#xff1a;迭代器模式 本次实验属于模仿型实验&#xff0c;通过本次实验学生将掌握以下内容&#xff1a; 1、理解迭代器模式的动机&#xff0c;掌握该模式的结构&#xff1b; 2、能够利用迭代器模式解决实际问题。 [实验任务]&#xff1a;JAVA和C常见数据结构迭代…
阅读更多...
PyTorch随机数生成：torch.rand，torch.randn，torch.randind，torch.rand_like

PyTorch随机数生成：torch.rand，torch.randn，torch.randind，torch.rand_like

在用PyTorch做深度学习开发过程中&#xff0c;时常用到随机数生成功能&#xff0c;但经常记不住几个随机数生成函数的用法&#xff0c;现在正好有点时间&#xff0c;整理一下。 1. torch.rand() torch.rand(*size, *, generatorNone, outNone, dtypeNone, layouttorch.stride…
阅读更多...
我们是如何测试人工智能的（一）基础效果篇（内含大模型的测试内容）

我们是如何测试人工智能的（一）基础效果篇（内含大模型的测试内容）

来源&#xff5c;TesterHome社区 作者&#xff5c;孙高飞 前言 这个系列算是科普文吧&#xff0c;尤其这第一篇可能会比较长&#xff0c;因为我这8年里一直在 AI 领域里做测试&#xff0c;涉及到的场景有些多&#xff0c;我希望能尽量把我经历过的东西都介绍一下&#xff0c;…
阅读更多...
＜JavaEE＞ 协议格式 -- 传输层协议 UDP

＜JavaEE＞ 协议格式 -- 传输层协议 UDP

目录 一、UDP协议格式长啥样&#xff1f; 二、端口号和IP地址 1&#xff09;UDP协议中包含哪两个端口号&#xff1f; 2&#xff09;有没有包含IP地址&#xff1f; 三、UDP报文长度 1&#xff09;UDP报文长度最长多长&#xff1f; 2&#xff09;UDP报文的组成&#xff1f…
阅读更多...
Socket地址

Socket地址

socket地址其实是一个结构体&#xff0c;封装端口号和IP等信息 。后面的 socket 相关的 api 中需要使用到这个socket地址。 客户端 -> 服务器需要知道服务器的&#xff08; IP, Port &#xff09; 一、通用 socket 地址 socket 网络编程接口中表示 socket 地址的是结构体…
阅读更多...
linux cpu调度分析

linux cpu调度分析

一、cpu调度调试方法 echo 0 > /sys/kernel/debug/tracing/tracing_on echo > /sys/kernel/debug/tracing/trace echo 30720 > /sys/kernel/debug/tracing/buffer_size_kb echo nop > /sys/kernel/debug/tracing/current_tracer echo sched_switch sched_wakeup s…
阅读更多...
MYSQL函数\约束\多表查询\事务

MYSQL函数\约束\多表查询\事务

函数 字符串函数 数值函数 mod就是取余 日期函数 流程函数 约束 外键约束 删除更新\外键 多表查询 多表关系 一对多 多对多 一对一 多表查询 内连接 select e.name d.name from emp e join dept d on e.id d.id; 外连接 select emp.*, d.name from emp left join tm…
阅读更多...
计算机网络（4）：网络层

计算机网络（4）：网络层

网络层提供的两种服务 虚电路服务&#xff08;Virtual Circuit Service&#xff09;和数据报服务&#xff08;Datagram Service&#xff09;是在网络层&#xff08;第三层&#xff09;提供的两种不同的通信服务。它们主要区别在于建立连接的方式和数据传输的方式。 虚电路服务…
阅读更多...
初识QT（上篇）：What Qt

初识QT（上篇）：What Qt

初识QT&#xff08;上篇&#xff09;&#xff1a;What Qt 前言 & 说明前言说明 初识QT1.1 QT的what1. 介绍2. 发展历程3. QT架构的主要内容4.QT的常用模块 1.2 QT的 why1. QT的核心机制 下篇笔记链接 前言 & 说明 前言 前言&#xff1a; 之前说要share的qt相关知识&am…
阅读更多...
看图学源码之FutureTask

看图学源码之FutureTask

RunnableFuture 源码学习&#xff1a; 成员变量 任务的运行状态的转化 package java.util.concurrent; import java.util.concurrent.locks.LockSupport;/**可取消的异步计算。该类提供了Future的基本实现&#xff0c;包括启动和取消计算的方法&#xff0c;查询计算是否完成以…
阅读更多...
基于flask和echarts的新冠疫情实时监控系统源码+数据库，后端基于python的flask框架，前端主要是echarts

基于flask和echarts的新冠疫情实时监控系统源码+数据库，后端基于python的flask框架，前端主要是echarts

介绍 基于flask和echarts的新冠疫情实时监控系统 软件架构 后端基于python的flask框架&#xff0c;前端主要是echarts 安装教程 下载到本地&#xff0c;在python相应环境下运行app.py,flask项目部署请自行完成 使用说明 flaskProject文件夹中 app.py是flask项目主运行文…
阅读更多...
最新文章

Copyright @ 2022~2023