Canvas 总结，到第4章 canvas图形变换
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> =========
Canvas 总结，到第4章 canvas图形变换的更多相关文章
- 《WPF程序设计指南》读书笔记——第7章 Canvas
1.Canvas面板 using System; using System.Windows; using System.Windows.Controls; using System.Windows.M ...
- CreateJS第0章- Canvas基础
最近网页游戏比较火,以前做过一些小游戏,但是过段时间就都忘了,今天在这里记录一下学习过程,以备后用.做网页游戏有很多种框架,我是flash程序用Adobe出品的CreateJS最容易.基本上继承了fl ...
- canvas星空和图形变换
图形变换. 一.画一片星空 先画一片canvas.width宽canvas.height高的黑色星空,再画200个随机位置,随机大小,随机旋转角度的星星. window.onload=function ...
- HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 《Programming WPF》翻译 第7章 1.图形基础
原文:<Programming WPF>翻译 第7章 1.图形基础 WPF使得在你的应用程序中使用图形很容易,以及更容易开发你的显卡的能力.这有很多图形构架的方面来达到这个目标.其中最重要 ...
- 《Programming WPF》翻译 第7章 2.图形
原文:<Programming WPF>翻译 第7章 2.图形 图形时绘图的基础,代表用户界面树的元素.WPF支持多种不同的形状,并为它们每一个都提供了元素类型. 7.2.1基本图形类 在 ...
- 【Android】第21章 2D图形和动画
分类:C#.Android.VS2015: 创建日期:2016-03-19 一.简介 Android系统定义了一系列独立的图形处理类,其中,2D图形处理类分别位于以下命名空间: Android.Gra ...
- HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
- Canvas学习系列一：初识canvas
最近你开始在学习canvas,打算把学习canvas的整个学习过程当中的一些笔记与总结记录下来,如有什么不足之处还请大神们多多指出. 1. 认识canvas Canvas元素的出现,可以说开启的Web ...
随机推荐
- windows程序设计基础知识
Win32 API(Application Programming Interface) Win32 API可认为是一个程序库,提供各式各样的与windows系统服务有关的函数. Win32 API是 ...
- 嵌入式02 STM32 实验04跑马灯
开学STM32 跑马灯的实验主要就是了解GPIO口的配置及使用,我这里是使用库函数进行编程,主要需要设置以下两方面: 1.使能需要使用的IO口的时钟,一共有A.B.C.D.E.F.G七组IO口 2.初 ...
- Python基础案例1如何实现对应位置上的元素相乘/相加/相减
如何通过a b得到c 本文以“乘”引入,其他运算,类似.案例逻辑如下: a = [[1, 2, 3], [4, 5, 6], [1, 1, 1]]b = [[1, 1, 2], [1, 3, 2], ...
- centos发布 7.7.1908版本了，怎么把老版本更新到新版本了？
CENTOS升级 7.6 升级到7.7.1908 0.查看目前版本 cat /etc/issue cat /etc/redhat-release 1.下载系统镜像文件 https://www.cent ...
- 3.02定义常量之const
[注:本程序验证是使用vs2013版] #include <stdio.h> #include <stdlib.h> #include <string.h> #pr ...
- （一）Django项目的目录结构
1.将app放在apps文件夹中,将改文件夹设置为 source root,便于引用.两个app不可以互相引用,可以利用第三个app实现一些操作. 2.将一些多媒体文件放在media中的相应app名称 ...
- 微信公众号 分享接口 签名通过 分享无效果（JSSDK自定义分享接口的策略调整）
为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK“分享到朋友圈”及“发送给朋友”接口,自定义的分享链接,其域名或路径必须与当前页面对应的公众号JS安全域名一致,否则将调用失 ...
- C# vb实现浮雕特效滤镜效果
在.net中,如何简单快捷地实现Photoshop滤镜组中的浮雕效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...
- Spring中ApplicationContextAware的作用
ApplicationContextAware 通过它Spring容器会自动把上下文环境对象调用ApplicationContextAware接口中的setApplicationContext方法. ...
- PCL提取圆柱系数
网上看了很多教程,没看到圆柱提取后的系数解释. 源码如下: #include <pcl/ModelCoefficients.h> #include <pcl/io/pcd_io.h& ...