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:中心点坐标xy:中心的坐标yradius:半径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，垂直速度Yspeedthis.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)


### 实心文字~~~jsvar 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.hqwc.cn/news/294953.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

多标签分类中常用指标和可视化例子

多标签分类中常用指标和可视化例子

多标签分类中常用指标 1. 准确率&#xff08;Accuracy&#xff09; 准确率计算的是正确预测的标签比例。对于多标签分类&#xff0c;这通常是一个较为严格的指标&#xff0c;因为要求每个实例的所有标签都预测正确。 Accuracy 正确预测的标签数 总标签数 \text{Accuracy} \…
阅读更多...
如何自定义右键弹框并实现位置自适应？

如何自定义右键弹框并实现位置自适应？

一、问题 右键显示弹框&#xff0c;但是靠近浏览器边缘的部分会被隐藏&#xff0c;需要实现弹框位置自适应 二、 问题分析 如果想要最终弹框的宽高不超过屏幕视口&#xff0c;就等于屏幕视口的总宽/高减去弹框打开时的起点坐标&#xff0c;剩下的部分大于等于弹框的宽/高&…
阅读更多...
Jmeter如何测试需要登录的接口

Jmeter如何测试需要登录的接口

首先说明本系统的登录采用的是session&#xff0c;但是无论是什么登录步骤都是大差不差的 1.首先要构造用户测试的数据保存到数据库 2.构造请求获取请求后的请求头&#xff08;如果需要代码参照请看最后&#xff09; 3.解析请求头获取需要的cookie&#xff08;sessionId是放…
阅读更多...
公司电脑监控软件：守护企业信息安全的重要防线

公司电脑监控软件：守护企业信息安全的重要防线

在当今信息化时代&#xff0c;企业信息安全问题日益突出&#xff0c;电脑监控软件作为企业信息安全的重要保障&#xff0c;越来越受到企业的关注和重视。本文将围绕公司电脑监控软件展开讨论&#xff0c;探讨其作用、优势以及如何选择合适的电脑监控软件。 首先&#xff0c;公司…
阅读更多...
07 Vue3中的三元表达式

07 Vue3中的三元表达式

概述 三元表达式时JavaScript中比较常用的一种原生语法&#xff0c;能够在一行代码中实现if-else的分支逻辑。 在Vue的双大括号中&#xff0c;我们也可以使用三元表达式去实现一些简单的条件渲染。 基本用法 我们创建src/components/Demo07.vue&#xff0c;先尝试一下三元表…
阅读更多...
【flink】状态清理策略(TTL)

【flink】状态清理策略(TTL)

flink的keyed state是有有效期(TTL)的&#xff0c;使用和说明在官网描述的篇幅也比较多&#xff0c;对于三种清理策略没有进行横向对比得很清晰。 全量快照清理(FULL_STATE_SCAN_SNAPSHOT)增量清理(INCREMENTAL_CLEANUP)rocksdb压缩清理(ROCKSDB_COMPACTION_FILTER) 注意&…
阅读更多...
3D 纹理贴图基础知识

3D 纹理贴图基础知识

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 介绍 纹理贴图是创建模型时离不开的最后一块拼图。同样&#xff0c;…
阅读更多...
关于“Python”的核心知识点整理大全34

关于“Python”的核心知识点整理大全34

目录 第&#xff11;3 章 外星人 13.1 回顾项目 game_functions.py 13.2 创建第一个外星人 13.2.1 创建 Alien 类 alien.py 13.2.2 创建 Alien 实例 alien_invasion.py 13.2.3 让外星人出现在屏幕上 game_functions.py 13.3 创建一群外星人 13.3.1 确定一行可容纳…
阅读更多...
深入了解C编译管道

深入了解C编译管道

文章目录 引言1. 预处理阶段2. 编译阶段3. 汇编阶段4. 链接阶段5.流程图结论 引言 C编译管道是软件开发中至关重要的工具&#xff0c;它负责将C语言源代码转换为可执行的机器代码。理解C编译管道的工作原理有助于提高代码的可读性、可维护性&#xff0c;并有助于优化生成的可执…
阅读更多...
润和软件HopeStage与亚信安全云主机深度安全防护系统完成产品兼容性互认证

润和软件HopeStage与亚信安全云主机深度安全防护系统完成产品兼容性互认证

近日&#xff0c;江苏润和软件股份有限公司&#xff08;以下简称“润和软件”&#xff09;HopeStage 操作系统与亚信科技&#xff08;成都&#xff09;有限公司&#xff08;以下简称“亚信安全”&#xff09;云主机深度安全防护系统完成兼容性测试。 测试结果表明&#xff0c;企…
阅读更多...
基于多反应堆的高并发服务器【C/C++/Reactor】（中）ChannelMap 模块的实现

基于多反应堆的高并发服务器【C/C++/Reactor】（中）ChannelMap 模块的实现

&#xff08;三&#xff09;ChannelMap 模块的实现 这个模块其实就是为Channel来服务的&#xff0c;前面讲了Channel这个结构体里边它封装了文件描述符。假如说我们得到了某一个文件描述符&#xff0c;需要基于这个文件描述符进行它对应的事件处理&#xff0c;那怎么办呢&…
阅读更多...
前端常用的开发工具

前端常用的开发工具

前端常用的开发工具&#x1f516; 文章目录 前端常用的开发工具&#x1f516;1. Snipaste--截图工具2. ScreenToGif--gif图片录制3. Typora--Markdown编辑器4. notepad--文本代码编辑器5. uTools--多功能工具6. EV录屏--录屏软件7. Xmind--思维导图8. Apifox -- 接口调试9. Tor…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023