Canvas 总结,到第4章 canvas图形变换
2024-09-26 03:15:19
canvas 必须认识到的大坑
<!-- 重点:
在js/canvas标签中定义的宽和高是画布实际的宽和高。
在样式表中定义的宽和高是画布缩放后的宽和高。
即:把js/canvas实际大小缩放到css中的宽高即可。浏览器中显示的效果是css中设置的宽高。 一,没有设置canvas宽高,默认是300px*150px。设置canvas在浏览器中的实际宽高,必须在canvas标签或者使用js进行设置。而使用css进行设置的宽高是进行缩放后大小,与实际位置不同。 1,<canvas id="mycanvas" class="mycanvas" width="200px" height="200px">您的浏览器不支持canvas标签</canvas>
2, var mycanvas = document.querySelector("#mycanvas");
var ctx = mycanvas.getContext('2d');//2d画布环境
mycanvas.width=400; //这里没有单位
mycanvas.height=300; //这里没有单位
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的坑</title>
<style>
.mycanvas{background: #ccc;width: 500px;height: 500px;}
.mycanvas1{
background: yellow;
/*这里的设置的宽高等价于把canvas默认宽高300*150 进行缩放至 100*100。
所以在js中 从(0,0)到(100,100)之间画一条直线,这两个点也按照300*150进行缩放,再画直线*/
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<canvas id="mycanvas" class="mycanvas">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var mycanvas = document.querySelector("#mycanvas");
var ctx = mycanvas.getContext('2d');//2d画布环境
mycanvas.width=100;//在页面中实际大小
mycanvas.height=100;//在页面中实际大小
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
</script> <canvas id="mycanvas1" class="mycanvas1">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var mycanvas1 = document.querySelector("#mycanvas1");
var ctx1 = mycanvas1.getContext('2d');//2d画布环境
ctx1.moveTo(0,0);
ctx1.lineTo(100,100);
ctx1.stroke();
</script>
</body>
</html> =========== ctx.beginPath(); 清除之前在内存中预先画的路径,重新开始预先画路径,直到ctx.stroke()才会真正在页面中画出路径 重点:ctx.beginPath();实例一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
.mycanvas{background: #ccc;}
</style>
</head>
<body>
<canvas id="mycanvas" class="mycanvas" width="300px" height="300px">您的浏览器不支持canvas</canvas>
<script>
var canvas = document.querySelector("#mycanvas");
var ctx = canvas.getContext("2d");//2d环境
//moveTo(0,0) 到 ctx.lineTo(100,200) 只是在内存中预先画的路径,并没有画出来。
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(100,200);
ctx.strokeStyle = "red";
ctx.stroke();//已经画一次 //ctx.beginPath(); 作用:清除之前在内存中预先画的路径,重新开始预先画路径。
//如果注释该代码,那么上面的路径在内存中会被再画一次。再继续画下面的路径。
//到了最后的ctx.stroke()时,就会把内存中预先画好的路径全部画出来。
ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.strokeStyle = "green";
ctx.stroke();//画出内存中预先画好的路径。
</script>
</body>
</html> 重点:
ctx.beginPath() 和 ctx.closePath() 不一定要成对出现,因为意义完全不同。 canvas 模板:
var canvas = document.querySelector("#mycanvas");
var ctx = canvas.getContext("2d");//设置绘画2d环境
ctx.beginPath(); 清除之前在内存中预先画的路径,重新开始预先画路径,直到ctx.stroke()才会真正在页面中画出路径
.........(具体画什么图形)
ctx.closePath();//自动闭合起点和终点,不一定要有,需要闭合路线才写。
ctx.strokeStyle="#d36";//设置路线颜色
ctx.stroke();//把内存中的路径全部画在网页中 //画线
ctx.beginPath(); 清除之前在内存中预先画的路径,重新开始预先画路径,直到ctx.stroke()才会真正在页面中画出路径
ctx.moveTo(50,500);
ctx.lineTo(100,300);
ctx.lineTo(300,600);
ctx.closePath();//自动闭合起点和终点
ctx.strokeStyle="#d36";//设置路线颜色
ctx.stroke();//把内存中的路径全部画在网页中 // 画圆 ctx.arc(x,y,r,开始弧度,终止弧度,true逆时针画/flase顺时针画);
// ctx.arc(圆点x轴坐标,圆点y轴坐标,圆的半径,开始弧度,终止弧度,true逆时针画/flase顺时针画); // 画矩形 rectangle 英 [ˈrektæŋɡl] 矩形
// ctx.strokeRect(x,y,width,height);该方法是已经封装好了的,不用ctx.beginPath(),ctx.closePath(),ctc.stroke();
// ctx.strokeRect(矩形起始点x轴坐标,矩形起始点y轴坐标,矩形宽,矩形高);
ctx.strokeStyle="purple";
ctx.strokeRect(200,200,300,100); <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
.mycanvas{background: #ccc;}
</style>
</head>
<body>
<canvas id="mycanvas" class="mycanvas" width="600px" height="600px">您的浏览器不支持canvas</canvas>
<script>
var canvas = document.querySelector("#mycanvas");
var ctx = canvas.getContext("2d");//2d环境
//moveTo(0,0) 到 ctx.lineTo(100,200) 只是在内存中预先画的路径,并没有画出来。
ctx.moveTo(50,250);
ctx.lineTo(250,250);
ctx.strokeStyle = "green";
ctx.stroke();
ctx.beginPath();//如果从新开始话,必须清除之前内存中预画的路径
ctx.moveTo(250,250);
ctx.lineTo(150,50);
ctx.strokeStyle = "yellow";
ctx.stroke();
ctx.beginPath();//如果从新开始话,必须清除之前内存中预画的路径
ctx.moveTo(150,50);
ctx.lineTo(50,250);
ctx.strokeStyle = "red";
ctx.stroke(); //画线
ctx.beginPath();//清除内存中预画好的路径,从新开始预画路径。
ctx.moveTo(50,500);
ctx.lineTo(100,300);
ctx.lineTo(300,600);
ctx.closePath();//自动闭合起点和终点
ctx.strokeStyle="#d36";
ctx.stroke(); // 画圆 ctx.arc(x,y,r,开始弧度,终止弧度,true逆时针画/flase顺时针画);
// ctx.arc(圆点x轴坐标,圆点y轴坐标,圆的半径,开始弧度,终止弧度,true逆时针画/flase顺时针画);
ctx.beginPath();
ctx.arc(200,400,50,0,2*Math.PI,true);
ctx.closePath();
ctx.strokeStyle="#00d";
ctx.stroke(); // 画矩形 rectangle 英 [ˈrektæŋɡl] 矩形
// ctx.strokeRect(x,y,width,height);
// ctx.strokeRect(矩形起始点x轴坐标,矩形起始点y轴坐标,矩形宽,矩形高);
ctx.strokeStyle="purple";
ctx.strokeRect(200,200,300,100);
</script>
</body>
</html> =========== 重点:描边 与 填充
二者可以一起使用,除了已经封装好的矩形ctx.strokeRect(x,y,w,h);
// 先描边再填充,填充会覆盖描边的颜色
// 如果是先填充再描边,描边会覆盖填充。
// 即后者会覆盖前者的。 给路径或图形填充颜色话,如果不设置颜色的话,默认颜色是黑色,如果要设置颜色的话,要写设置颜色,然后再调用fill方法。这里的#00f就是蓝色 //描边样式
ctx.strokeStyle="#f0f";//必须写在stroke()方法之前,之后的无效
ctx.lineWidth = 5;
ctx.stroke(); //填充样式
ctx.fillStyle="#0f0";//必须写在fill()方法之前,之后的无效
ctx.fill(); <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>描边与填充</title>
<style>
.mycanvas{background: #ccc;}
</style>
</head>
<body>
<canvas id="mycanvas" class="mycanvas" width="300px" height="300px">您的浏览器不支持canvas,请升级!</canvas>
<script>
var canvas = document.querySelector("#mycanvas");
var ctx = canvas.getContext("2d");//设置2d环境
ctx.moveTo(20,20);
ctx.lineTo(50,100);
ctx.lineTo(20,100);
ctx.closePath();
// 先描边再填充,所以填充会覆盖描边的颜色
// 如果是先填充再描边,描边会覆盖填充。后面覆盖前面的部分。
ctx.strokeStyle="#f0f";
ctx.lineWidth = 5;
ctx.stroke();
ctx.fillStyle="#0f0";
ctx.fill(); //画圆
// 先描边再填充,填充的红色会覆盖描边的紫色
// 相反,描边的紫色会覆盖填充的红色
ctx.beginPath();
ctx.arc(100,200,50,0,2*Math.PI,true);
ctx.strokeStyle="purple";
ctx.lineWidth=10;
ctx.stroke();
ctx.fillStyle="rgba(255,0,0,.2)";
ctx.fill(); //矩形
ctx.beginPath();
ctx.strokeStyle="rgba(0,255,255,.5)";
ctx.lineWidth=20;
ctx.strokeRect(150,80,100,50);
//因为ctx.strokeRect(x,y,w,h);是已经封装好的,所以使用fill()方法是无效的,即矩形不能填充,只能使用其他方式进行填充。
// ctx.fillStyle="green";
// ctx.fill();
</script>
</body>
</html> =========
最新文章
- C#复习②
- Android——旋转屏幕导致Activity重建解决方法
- Python Decorator 和函数式编程
- C#与数据库访问技术总结(十五)之 DataAdapter对象代码示例
- Opencv step by step - 基本数据类型
- 【转】谁说Vim不是IDE?(三)
- 利用Java反射机制完成XML到对象的解析
- phpcms v9为联动菜单字段添加验证提醒功能 解决标题不能为空
- SSH 服务启动时出现如下错误:fatal: Cannot bind any address
- Python学习笔记——基础篇【第五周】——random &; time &; datetime模块
- Flutter 初尝:从 Java 无缝过渡
- Python Cookbook(第3版)中文版:15.15 C字符串转换为Python字符串
- sau交流学习社区--在element-ui中新建FormData对象组合上传图片和文件的文件对象,同时需要携带其他参数
- js实现搜索记录列表
- 如何搭建一个VUE项目
- Docker笔记——jenkins镜像制作
- Accounting Calendar template
- Discuz!安装搭建
- Mat的详解
- mysql排序数据
热门文章
- css中常用的选择器和选择器优先级
- Django模型层之单表操作
- Helm命令日常使用
- ElasticSerach 6.x的安装及配置
- 解决Windows10关闭UAC后,开机启动项不生效的问题
- MyEclipse的 lib和Build path(构建路径)
- Java调用WebService方法总结(7)--CXF调用WebService
- Fortify漏洞之Dynamic Code Evaluation: Code Injection(动态脚本注入)和 Password Management: Hardcoded Password(密码硬编码)
- Android Jetpack组件 - ViewModel,LiveData使用以及原理
- [C#(WinForm)]判断第一次启动程序