canvas入门笔记（上）

news2024/12/27 11:21:16

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)]

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

资深老鸟整理，Java接口自动化测试总结，从0到1自动化...

资深老鸟整理，Java接口自动化测试总结，从0到1自动化...

这几年接口自动化变得越来越热门&#xff0c;相对比于UI自动化&#xff0c;接口自动化有一些优势 1&#xff09;运行比UI更稳定&#xff0c;让BUG更容易定位 2&#xff09;UI自动化维护成本太高&#xff0c;接口相对低一些 接口测试其实有很多方式&#xff0c;主要有两种&…
阅读更多...
基于SpringBoot + Vue的图书管理系统

基于SpringBoot + Vue的图书管理系统

功能概述 该图书管理系统提供了一系列功能&#xff0c;包括图书管理、图书类型管理、读者借阅归还图书、用户管理和重置密码等。 在图书管理功能中&#xff0c;管理员可以方便地进行图书信息的管理。他们可以添加新的图书记录&#xff0c;包括书名、作者、出版社、ISBN等信息&a…
阅读更多...
进行鸿蒙开发前的一些工具了解

进行鸿蒙开发前的一些工具了解

文章概叙 文章主要讲的是开发的一些工具&#xff0c;如DevEco Studio,以及ArkTs的一些基础。 为啥要学习鸿蒙开发 抛开各种遥遥领先不讲&#xff0c;现在打开BOSS直聘&#xff0c;已经可以看到在BOSS上有不少的岗位是关于鸿蒙的&#xff0c;甚至是华为的岗位&#xff0c;而在…
阅读更多...
Report Design

Report Design

ERP_ENT_STD-CSDN博客
阅读更多...
mac传输文件到windows

mac传输文件到windows

前言 由于mac系统与windows系统文件格式不同&#xff0c;通过U盘进行文件拷贝时&#xff0c;导致无法拷贝。官方解决方案如下&#xff0c;但是描述的比较模糊。看我的操作步骤即可。 https://support.apple.com/zh-cn/guide/mac-help/mchlp1657/12.0/mac/12.6 前提条件 mac与…
阅读更多...
产品设计 之 创建完美产品需求文档的4个核心要点

产品设计 之 创建完美产品需求文档的4个核心要点

客户描述他们想要的产品和最终交付的产品之间的误解一般很大&#xff0c;设计者和客户的角度不同&#xff0c;理解的程度也不同&#xff0c;就需要一个统一的交流中介。这里包含PRD。 为了说明理解误差的问题。下面这张有趣的图画可以精准阐述。 第一张图片展示了客户所描述…
阅读更多...
什么是网站监控？

什么是网站监控？

网站监控是跟踪网站的可用性和性能&#xff0c;以最小化宕机时间&#xff0c;优化性能并确保顺畅的用户体验。维护网站正常运行对于任何企业来说都是至关重要的&#xff0c;因而对大多数业务来说&#xff0c;网站应用监控都是一个严峻的挑战。Applications Manager网站应用监控…
阅读更多...
计算机图形学理论(4)：缓冲区

计算机图形学理论(4)：缓冲区

本系列根据国外一个图形小哥的讲解为本&#xff0c;整合互联网的一些资料&#xff0c;结合自己的一些理解。 什么是缓冲区&#xff1f; 缓冲区是保存某些数据的临时存储空间。 为什么我们需要缓冲区&#xff1f;原因很简单&#xff0c;当数据量很大时&#xff0c;因为计算机无…
阅读更多...
自学SLAM（9）《第五讲：特征点法视觉里程计》作业

自学SLAM（9）《第五讲：特征点法视觉里程计》作业

文章目录 1.ORB特征点1.1 ORB提取1.2 ORB描述1.3 暴力匹配1.4 最后&#xff0c;请结合实验&#xff0c;回答下⾯⼏个问题 2.从 E 恢复 R&#xff0c;t3.用 G-N 实现 Bundle Adjustment4.* 用 ICP 实现轨迹对齐 1.ORB特征点 1.1 ORB提取 ORB(Oriented FAST and BRIEF) 特征是 S…
阅读更多...
插入排序之C++实现

插入排序之C++实现

描述 插入排序是一种简单直观的排序算法。它的基本思想是将一个待排序的数据序列分为已排序和未排序两部分&#xff0c;每次从未排序序列中取出一个元素&#xff0c;然后将它插入到已排序序列的适当位置&#xff0c;直到所有元素都插入完毕&#xff0c;即完成排序。 实现思路…
阅读更多...
外星人Alienware Area-51 R2原厂Win10预装系统

外星人Alienware Area-51 R2原厂Win10预装系统

大三角外星人Area 15 R2原装出厂WINDOWS10系统 链接&#xff1a;https://pan.baidu.com/s/1JwDuHx1j7fRABtIpLmKW_g?pwdq4pd 提取码&#xff1a;q4pd 原厂系统自带所有驱动、外星人出厂主题壁纸、专属LOGO标志、Office办公软件、MyAlienware、外星人控制中心等预装程序 文…
阅读更多...
T-Dongle-S3开发板信息

T-Dongle-S3开发板信息

相关学习网站 ESP32保姆级教程开始学习ESP32_哔哩哔哩_bilibili Wokwi - Online ESP32, STM32, Arduino Simulator T-Dongle-S3 资料:https://spotpear.cn/index/study/detail/id/1069.html 主控芯片&#xff1a; ESP32-S3 Xtensa 芯片集成了 Xtensa 32 位 LX7 双核处理器…
阅读更多...
如何用Python画坤坤？

如何用Python画坤坤？

前言 最近闲得慌&#xff0c;突然想起坤坤了&#xff0c;那就画一个吧。 一、Python画坤坤 坤坤大家都熟悉不过了&#xff0c;也就是蔡徐坤。 代码&#xff1a; from turtle import * from math import * #高级椭圆参数方程&#xff08;颜色&#xff09;&#xff0c;sita为…
阅读更多...
[java] 注释

[java] 注释

目录 单行注释: 多行注释: 文档注释: doc标签 单行注释: 多行注释: 注意多行注释不能嵌套多行注释: 文档注释: 注释内容可以被JDK提供的工具 javadoc 所解析&#xff0c;生成一套以网页文件形式体现的该程序的说明文档&#xff0c;一般写在类。 doc标签 标签 描述 示例 …
阅读更多...
[论文阅读笔记28] 对比学习在多目标跟踪中的应用

[论文阅读笔记28] 对比学习在多目标跟踪中的应用

这次做一篇2D多目标跟踪中使用对比学习的一些方法. 对比学习通过以最大化正负样本特征距离, 最小化正样本特征距离的方式来实现半监督或无监督训练. 这可以给训练MOT的外观特征网络提供一些启示. 使用对比学习做MOT的鼻祖应该是QDTrack, 本篇博客对QDTrack及其后续工作做一个总…
阅读更多...
设计模式--命令模式

设计模式--命令模式

实验16&#xff1a;命令模式 本次实验属于模仿型实验&#xff0c;通过本次实验学生将掌握以下内容&#xff1a; 1、理解命令模式的动机&#xff0c;掌握该模式的结构&#xff1b; 2、能够利用命令模式解决实际问题。 [实验任务]&#xff1a;多次撤销和重复的命令模式 某系…
阅读更多...
算法学习系列（十）：用数组模拟链表、双链表、栈、队列、单调栈、单调队列

算法学习系列（十）：用数组模拟链表、双链表、栈、队列、单调栈、单调队列

目录 引言一、数组模拟链表1.模板2.例题3.测试 二、数组模拟双链表1.模板2.例题3.测试 三、数组模拟栈1.模板2.例题3.测试 四、数组模拟队列1.模板2.例题3.测试 五、数组模拟单调栈1.例题模板2.测试 六、数组模拟单调队列1.例题模板2.测试 引言 首先说一下为什么要拿数组来模拟…
阅读更多...
用户认证篇

用户认证篇

文章目录 1. 如何生成用户认证token令牌1.1 相关表1.2 生成令牌逻辑1.3 最终结果 2. 如何认证用户token令牌2.1 前端组件2.2 TokenAuthenticationFilter2.3 获得登陆用户 3. 如何刷新用户认证 Token 令牌3.1 前端组件3.2 刷新令牌接口 4. 如何模拟用户认证token令牌5. 如何实现…
阅读更多...
车手互联是不是杀手锏，来听听一家头部手机厂的座舱方法论

车手互联是不是杀手锏，来听听一家头部手机厂的座舱方法论

作者 |Amy 编辑 |德新 十年前&#xff0c; 苹果CarPlay和谷歌Android Auto相继推出&#xff0c;手机与车机两个此前貌似无关的品类&#xff0c;从此开始产生交集。 科技巨头看好车机的硬生态&#xff0c;汽车大鳄们则垂涎于科技圈的软实力。 CarPlay和Android Auto的出现&am…
阅读更多...
Chainlink 开发者故事：Krypton 从构思到产品的 Chainlink BUILD之旅

Chainlink 开发者故事：Krypton 从构思到产品的 Chainlink BUILD之旅

识别问题&#xff0c;构思解决方案&#xff0c;建立它&#xff0c;推出它&#xff0c;然后扩展它。这就是科技初创企业的操作手册。 现在&#xff0c;前Chainlink黑客马拉松获奖者&#xff0c;当前的Chainlink BUILD成员Krypton已经进行到了第四步&#xff1a;推出。Krypton团…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023