canvas画布基本知识点总结
- HTML5的canvas元素使用JavaScript画图;
<canvas width="600" height="400"> </canvas>
canvas画图的基本框架
- 画布默认背景颜色为白色,大小为300*150;
- 若要设置画布大小,不建议在style的样式设置尺寸,效果相当于将原本300*150的画布等比例放大缩小,包括里面画的图;
- 建议在元素本身设置;
<body>
<!-- 准备画布 -->
<canvas width="600" height="400"></canvas>
<!-- 准备绘制工具 -->
<!-- 利用工具绘图 -->
<script>
// 获取元素
var myCanvas=document.querySelector('canvas');
// 获取上下文,绘制工具箱
var ctx=myCanvas.getContext('2d');
// 移动画笔
ctx.moveTo(100,100);
// 绘制直线(轨迹,绘制路径)
ctx.lineTo(200,100);
// 描边
ctx.stroke();
</script>
</body>
关于线条的问题
- 默认宽度为1px
- 默认颜色黑色
- 但是显示是灰色,2px宽度,原因是对其点是线的中心位置,会把线分成两个0.5px,显示的会是不饱和增加宽度;
- 解决方法:前或后移动0.5px即可;
- 当要画多条不同样式的平行线时,存在样式覆盖问题,需要开辟新路径;
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext("2d");
// 画平行线
// 蓝色 10px
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.strokeStyle="blue";
ctx.lineWidth=10;
ctx.stroke();
// 红色 20px
ctx.beginPath();//开辟新路径
ctx.moveTo(100,200);
ctx.lineTo(200,200);
ctx.strokeStyle="red";
ctx.lineWidth=20;
ctx.stroke();
// 绿色 30px
ctx.beginPath();//开辟新路径
ctx.moveTo(100,300);
ctx.lineTo(200,300);
ctx.strokeStyle="green";
ctx.lineWidth=30;
ctx.stroke();
</script>
</body>
- 当绘制图形,需要填充颜色时,使用fill()函数;默认填充颜色为黑色;
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
// 绘制一个三角形
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,100);
// 描边
ctx.stroke();
// 填充
ctx.fill();
</script>
</body>
- 当绘制封闭图形时,会出现起始点和lineTo的结束点无法完全闭合,有缺角
- 解决方法:使用canvas的自动闭合路径closePath();
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
// 绘制一个三角形
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
// 起始点和lineTo的结束点无法完全闭合,有缺角;
// ctx.lineTo(100,100);
// 使用canvas自动闭合
ctx.closePath();
ctx.lineWidth=10;
// 描边
ctx.stroke();
</script>
填充规则(非零环绕)
- 看一块区域是否被填充,从区域画一条直线,看和这条直线相交的轨迹;
- 如果是顺时针就+1,逆时针就-1;
- 计算所有轨迹的和,如果非0就填充,是0就不填充;
- 如上图1区域:轨迹和为1,填充;2区域:轨迹和为2,填充;3区域:轨迹和为0,不填充;
画虚线
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
// 画线
ctx.moveTo(100.5, 100.5);
ctx.lineTo(300, 100.5);
ctx.setLineDash([5,10,15]);
ctx.stroke();
</script>
- 画虚线:通过数组描述虚线的排列方式;
- 获取虚线的排列方式,获取的是不重复的那一段的排列方式;
- 例如:console.log(ctx.setLineDash());获取的是5 10 15 5 10 15;
- 括号里数字为[数字长度,空格长度,数字长度,空格长度…];
画渐变矩形(例如黑白渐变)
- 主要利用for循环,逐渐改变线条颜色,矩形通过多个线条拼凑;
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
// 绘制一个矩形
// ctx.moveTo(100, 100);
// ctx.lineTo(255,100);
// ctx.lineWidth='30';
// // 颜色填充
// ctx.strokeStyle='#fff';
// // 从黑到白
// ctx.stroke();
// 线是由点构成的
ctx.lineWidth = '30';
//起始位置
// ctx.moveTo(100, 100);
for (var i = 0; i < 255; i++) {
//画255条1px长的线;
//每次开辟一条新路径,不然会样式覆盖
ctx.beginPath();
//起始位置
ctx.moveTo(100 + i - 1, 100);
//结束位置
ctx.lineTo(100 + i, 100);
ctx.strokeStyle = 'rgb(' + i + ',' + i + ',' + i + ')';
//描边
ctx.stroke();
}
</script>
</body>
网格、坐标系、点的绘制
- 网格即多条线按一定的规则排列组成;
- 坐标系绘制两条相互垂直的有向线段,箭头自己计算画三角形,进行填充即可;
- 点的绘制
- 需要注意的是,点的坐标要先定下来,用对象存储
- 点的绘制就是以点的坐标为中心,绘制一个正方形,进行填充,点的大小可以控制;
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
//绘制点
//点的尺寸
//以坐标中心绘制点
//点坐标
var coordinate = {
x: 146,
y: 357
}
//点尺寸
var dottedSize = 6;
ctx.moveTo(coordinate.x - dottedSize / 2, coordinate.y - dottedSize / 2);
ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y - dottedSize / 2);
ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y + dottedSize / 2);
ctx.lineTo(coordinate.x - dottedSize / 2, coordinate.y + dottedSize / 2);
ctx.closePath();
ctx.fill();
</script>
</body>
图形绘制
- 参数(x,y)为坐标,(w,h)为宽高;
弧度绘制
- 什么是弧度?
- 一种长度的描述单位,一个圆有2Π个弧度,一个角度等于Π/180弧度
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
//绘制圆弧
//1.确定圆心
//2.确定圆的半径
//3.确定起始位置和结束位置,确定圆弧长度和位置
//4.确定绘制方向(一般是默认的顺时针)direction
var w=ctx.canvas.width;
var h=ctx.canvas.height;
//在中心位置画一个半径150px的圆弧右下角(横坐标,纵坐标,半径,起始角度,结束角度)
ctx.arc(w/2,h/2,150,0,Math.PI/2);
ctx.stroke();
</script>
</body>
- 绘制扇形时,圆心的确定要放在画弧形的前面;
绘制文本
- ctx.font='微软雅黑’设置字体;
- strokeText(text,x,y,maxWidth);
- fillText(text,x,y,maxWidth);
- text即要绘制的文本;
- x,y为文本绘制的坐标(文本左下角);
- maxWidth设置文本的最大宽度,可选参数;
- ctx.textAlign文本水平对齐方式,相对绘制坐标来说;
- 可取值有 left center right start默认 end
- ctx.direction属性css(rtl ltr)start和end与此相关;
- 若为ltr则start和left表现一致;
- 若为rtl则start和right表现一致;
- ctx.textBaseline设置基线(垂直对齐方式);
- top文本的基线处于文本的正上方,并且有一段距离;
- middle文本的基线处于文本的正中间
- bottom文本的基线处于文本的正下方,并且有一段距离;
- hanging文本的基线处于文本的正上方,并且与文本粘合;
- alphabetic默认值,文本的基线处于文本的正下方,并且穿过文字;
- ideographic和bottom相似,但是不一样;
- measureText()获取文本的宽度obj.width;
- 注意
- 文本样式设置要在文本描边或者填充之前;
- 左右对齐方式的对齐基准是文字描绘的起始坐标;
图片绘制
- drawImage()
- 三个参数drawImage( image, x , y);
- img图片对象、canvas对象、video对象
- x,y图像绘制的左上角
- 五个参数drawImage( image, x , y , w, h);
- w,h分别为图形的宽高设置,是缩放,不是截取,其余参数意义同上;
- 九个参数drawImage( image, x , y , w , h, x1, y1 ,w1, h1);
- image是图片对象,x,y是图片定位的坐标(即原图片上图片从哪开始截取),w,h是在原图片上的图片截取区域大小,x1,y1是绘制在画布上的坐标,w1,h1是绘制图片的大小,绘制的图片不是裁剪而是前面截取图片的缩放
canvas的2d转换
- 移动, translate(x,y);移动的是坐标轴,不是绘制的内容
- 缩放,scale(0.5,1),表示横坐标缩放0.5倍,纵坐标缩放1倍,缩放的是坐标轴,不是绘制的内容
- 旋转,rotate(),旋转中心默认是坐标原点;
canvas画布基本知识点总结的更多相关文章
- 软件项目技术点(6)——结合鼠标操作绘制动态canvas画布
AxeSlide软件项目梳理 canvas绘图系列知识点整理 我们创建一个类封装了所有鼠标需要处理的事件. export class MouseEventInfo { el: HTMLElemen ...
- html 5 canvas画布整理
1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础(Canvas 画布)
1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十 ...
- 关于使用Css设置Canvas画布大小的问题
问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- 自学HTML5第四节(canvas画布详解)
canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...
- “canvas画布仿window系统自带画图软件"项目的思考
"canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...
- 更新——Canvas画布动画效果之实现倒计时
Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...
随机推荐
- C++ 中assert断言函数的基本用法
在我们的实际开发过程之中,常常会出现一些隐藏得很深的BUG,或者是一些概率性发生的BUG,通常这些BUG在我们调试的过程中不会出现很明显的问题,但是如果我们将其发布,在用户的各种运行环境下,这些程序可 ...
- 【python刷题】LRU
什么是LRU? LRU是Least Recently Used的缩写,即最近最少使用,是一种常用的页面置换算法,选择最近最久未使用的页面予以淘汰.该算法赋予每个页面一个访问字段,用来记录一个页面自上次 ...
- 从tcp层面研究java socket 的使用
本文主要通过wireshark抓包来分析java socket程序的一些细节, 解决以前的一些疑问: 1.当一方的socket先关闭后,另一方尚未关闭的socket 还能做什么? 2.当基于socke ...
- Location和Content-Location
div.example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; mar ...
- 利用Mixins扩展类功能
8.18 利用Mixins扩展类功能 - python3-cookbook 3.0.0 文档 https://python3-cookbook.readthedocs.io/zh_CN/latest/ ...
- Java网络基础
本来主要是讲自己在网络编程方面的学习总结,里面主要讲计算网络的基础.TCP的通信协议,还有些简单的案例.下面是我学习的一个简单路线, 一.概述 计算机网络是将不同地理位置的具有独立功能的多台计算机及其 ...
- Docker私服搭建--Harbor
Docker私服搭建--Harbor Harbor概述 Harbor的安全机制 Harbor的镜像同步 Harbor的镜像同步机制 Harbor的多级部署 一.安装 1.1 docker安装 1.2 ...
- ShowDoc,APIDoc,可道云API,语雀-适合IT企业的文档工具
ShowDoc,APIDoc,可道云API,语雀-适合IT企业的文档工具 一.ShowDoc官方文档及说明 1.1 它可以用来做什么 1.2 它都有些什么功能 1.3 使用在线的ShowDoc 1.4 ...
- 嵌入式设备上卷积神经网络推理时memory的优化
以前的神经网络几乎都是部署在云端(服务器上),设备端采集到数据通过网络发送给服务器做inference(推理),结果再通过网络返回给设备端.如今越来越多的神经网络部署在嵌入式设备端上,即inferen ...
- c++中几种swap
在c与c++中,有多种办法可以通过函数交换传入的两数的值,但有容易有一些问题产生,因而本文将几种交换方式及容易出错的点进行了分类. 1.传引用这是c++中最常见方式如下: int swap1 (int ...