canvas画布笔记
HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、自定义图像）
HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、⾃定义图像）⼀、对 canvas 的理解 <canvas>标签是 HTML5 中的新标签，像所有的 dom 对象⼀样它有⾃⼰本⾝的属性、⽅法和事件。
canvas 是⽤来在⽹页上绘制图形的（我们通常称之为画布），canvas 只是图形容器，需要使⽤ js 脚本来绘制图形，可以绘制线条、矩形、多边形、圆形、圆环、组合图形、⽂字、⾃定义图像等。
浏览器⽀持注释：Internet Explorer 8 以及更早的版本不⽀持 <canvas> 标签。
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari ⽀持 <canvas>标签。
⼆、基本⽅法绘图环境： 语法 Canvas.getContext(contextID) 参数contextID指定了您想要在画布上绘制的类型。
当前唯⼀的合法值是 "2d"，它指定了⼆维绘图，并且导致这个⽅法返回⼀个环境对象，该对象导出⼀个⼆维绘图API。
【注】：getContext() ⽅法返回⼀个⽤于在画布上绘图的环境。
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。
绘制图形样式style（⼀般在绘制图形前先进⾏样式设定）：context.fillStyle //填充样式context.strokeStyle //笔触颜⾊context.lineWidth //边框宽度绘制图像有两种⽅法：context.fill() //填充context.stroke() //绘制边框颜⾊的表⽰⽅式:颜⾊名称:"red" "green" "blue"⼗六进制颜⾊值: "#FFFFFF"三⾊值：rgb(1-255,1-255,1-255)四⾊值：rgba(1-255,1-255,1-255,透明度)三、使⽤ <canvas> Step1: ⾸先在html页⾯中添加<canvas>标签，规定好画布的id和尺⼨，代码如下：<!--规定了canvas元素的id名称为canvas、宽度为400px、⾼度为300px--><canvas id="myCanvas" width="400" height="300"/> Step2: 通过JavaScript来进⾏绘制： ⽅法⼀：<!--⽤⾕歌浏览器，获取canvas对象时需要先加载对象，所以要把该段代码放到body中，在js⽂件⾥进⾏绘制图像--><script src="canvas.js"></script> ⽅法⼆：<!--或者直接在body⾥编写代码--><script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "#FF0000"; context.fillRect(50,50,150,100);</script> 图解： Step3: Step2 分步骤： 通过id来捕获canvas元素 创建 context 对象 指定 fillStyle 填充颜⾊为红⾊指定 fillRect ：fillRect(起始点x轴坐标, 始点y轴坐标, 宽度, ⾼度);四、实例1--绘制线条： context.moveTo(x,y) context.lineTo(x,y)x:x坐标y:y坐标起点 moveTo 的点到终点 lineTo 的点之间画⼀条直线如果没有moveTo那么第⼀次lineTo的效果和moveTo⼀样每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前⼀次lineTo的结束点1 1 // 绘制对⾓线2 2 function demo1(id){3 3 var canvas = document.getElementById(id);4 4 var context = canvas.getContext("2d");5 5 6 6 context.strokeStyle = "#ff0000";7 78 8 context.moveTo(0,0);9 9 context.lineTo(200,100);10 10 context.stroke();11 11 }View Code实例结果：1// 绘制直⾓三⾓形2function demo1(id){3var canvas = document.getElementById(id);4 var context = canvas.getContext("2d");5 6 context.strokeStyle = "#ff0000";78 context.lineTo(20, 20);9 context.lineTo(20, 70);10 context.lineTo(70, 70);11 context.lineTo(20, 20);12 context.stroke();13 }View Code【注】：1. 三⾓形有三个点，但在连线的时候还需要连回顶点；2. 最后⼀定记得加上 stroke(); 初学时容易犯这个⽑病，这相当于你把点定好了，却没⽤线连起来，岂不......实例结果：CSS属性中有⼀圆⾓设置 radius，canvas画线段也要达到这种圆⾓匾额效果，我么也有相应的办法： lineJoin 属性,可以设置线的交汇处的样式，lineJoin有3个属性值：miter(尖⾓，默认)，bevel（斜⾓）,round（圆⾓） lineCap 属性，定义线条的端点。
Android培训之Canvas绘图基础详解(附源码下载)
北京尚学堂提供Android中，如果我们想绘制复杂的自定义View或游戏，我们就需要熟悉绘图API。
Android通过Canvas类暴露了很多drawXXX方法，我们可以通过这些方法绘制各种各样的图形。
Canvas绘图有三个基本要素：Canvas、绘图坐标系以及Paint。
Canvas是画布，我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面，在drawXXX方法中我们需要传入要绘制的图形的坐标形状，还要传入一个画笔Paint。
drawXXX方法以及传入其中的坐标决定了要绘制的图形的形状，比如drawCircle方法，用来绘制圆形，需要我们传入圆心的x和y坐标，以及圆的半径。
drawXXX方法中传入的画笔Paint决定了绘制的图形的一些外观，比如是绘制的图形的颜色，再比如是绘制圆面还是圆的轮廓线等。
Android系统的设计吸收了很多已有系统的诸多优秀之处，比如Canvas绘图。
Canvas不是Android所特有的，Flex和Silverlight都支持Canvas绘图，Canvas 也是HTML5标准中的一部分，主流的现代浏览器都支持用JavaScript在Canvas上绘图，如果你用过HTML5中的Canvas，你会发现Android的Canvas的绘图API与其很相似。
总之，Canvas绘图不是Android所特有的。
为了演示Android中各种drawXXX方法的时候，我做了一个App，通过单击相应的按钮绘制相应的图形，主界面如下所示：Canvas坐标系与绘图坐标系Canvas绘图中牵扯到两种坐标系：Canvas坐标系与绘图坐标系。
∙Canvas坐标系Canvas坐标系指的是Canvas本身的坐标系，Canvas坐标系有且只有一个，且是唯一不变的，其坐标原点在View 的左上角，从坐标原点向右为x轴的正半轴，从坐标原点向下为y轴的正半轴。
∙绘图坐标系Canvas的drawXXX方法中传入的各种坐标指的都是绘图坐标系中的坐标，而非Canvas坐标系中的坐标。
java swing学习笔记二(画布Canvas)
本文由我司收集整编，推荐下载，如有疑问，请与我司联系java swing 学习笔记二(画布Canvas)2012/09/04 0 /*** 画布* @time 11:23:53 AM* @author retacn yue* @Email zhenhuayue@sina*/public class Test_MyCanvas implements KeyListener, MouseInputListener {Canvas c;// 画布TextField tf;// 用于显示提示信息的文本框String s; // 用于存放按键信息的字符串public static void main(String[] args) {// 初始化帧Frame frame = new Frame( Canvas // 初始化画布Test_MyCanvas test_MyCanvas = new Test_MyCanvas();test_MyCanvas.c = new Canvas();test_MyCanvas.tf = new TextField();frame.add( South , test_MyCanvas.tf);frame.add( Center , test_MyCanvas.c);frame.setSize(300,150);test_MyCanvas.c.addMouseListener(test_MyCanvas);test_MyCanvas.c.addKeyListe ner(test_MyCanvas);frame.setVisible(true);}// 按键按下public void keyPressed(KeyEvent e) {}// 按键抬起public void keyReleased(KeyEvent e) {tf.setText( keyReleased }// 响应键盘事件public void keyTyped(KeyEvent e) {tf.setText( keyTyped s = e.getKeyChar();c.getGraphics().drawString(s, 0, 20);}// 鼠标点击public void mouseClicked(java.awt.event.MouseEvent e) {tf.setText( mouseClicked // 画布取得焦点c.requestFocus();}// 鼠标进入public void mouseEntered(java.awt.event.MouseEvent e) {tf.setText( mouseEntered }// 鼠标退出public void mouseExited(java.awt.event.MouseEvent e) {tf.setText( mouseExited }// 鼠标按下public void mousePressed(java.awt.event.MouseEvent e) {tf.setText( mousePressed }// 鼠标松开public void mouseReleased(java.awt.event.MouseEvent e) {tf.setText( mouseReleased }public void mouseDragged(java.awt.event.MouseEvent e) {}public void mouseMoved(java.awt.event.MouseEvent e) {}}tips:感谢大家的阅读，本文由我司收集整编。
使用Canvas实现手写笔迹和手势识别的前端开发指南
使用Canvas实现手写笔迹和手势识别的前端开发指南在现代的前端开发中，随着移动设备的普及和触摸操作的广泛应用，手写笔迹和手势识别成为了开发者们研究和探索的领域之一。
利用Canvas技术，我们可以实现用户在页面上书写、绘图、手势操作的功能，为用户提供更加直观和便利的操作体验。
一、利用Canvas实现手写笔迹要实现手写笔迹功能，首先需要在页面上创建一个Canvas元素。
通过JavaScript代码，我们可以监听用户在页面上的鼠标或触摸事件，并将其对应的坐标绘制在Canvas上，从而形成一个手写的笔迹。
在监听事件的回调函数中，我们可以使用Canvas提供的绘图API来控制笔迹的颜色、线条的粗细等属性，从而使得绘制出来的笔迹更加美观和逼真。
可以根据用户的需求，自定义线条的样式，甚至添加一些特效，增加交互的趣味性。
二、实现手势识别功能手势识别是指通过分析用户在页面上的触摸操作，识别出用户的手势意图，并做出相应的响应。
在前端开发中，我们可以利用Canvas技术来实现手势识别功能。
例如，当用户在页面上绘制了一个特定的图形时，我们可以根据绘制的路径和形状来判断用户的手势类型。
比如，用户绘制了一个圆形，我们可以判断用户进行了一个放大的手势操作；如果用户绘制了一个箭头形状，我们可以识别用户的滑动手势。
为了实现手势识别功能，我们需要在Canvas上绘制一个网格，将坐标系分割成多个小方格。
通过监听用户在页面上的触摸事件，并记录下用户轨迹所经过的方格，我们可以分析这些轨迹，判断用户的手势类型。
可以利用一些算法和模式识别的方法来提高手势识别的准确率和灵敏度。
三、拓展：与后端的数据交互利用Canvas实现手写笔迹和手势识别功能是前端开发中的一个方向，但在实际项目中，我们通常需要将这些数据传给后端进行进一步的处理和分析。
比如，利用手写笔迹可以实现手写输入功能，将用户的手写内容转化为文字；利用手势识别可以实现手势密码解锁等功能。
c语言canvas的使用方法
c语言canvas的使用方法C语言是一种强大的编程语言，它提供了各种各样的功能和库，让程序员可以灵活地开发各种应用程序。
其中，canvas是C语言中一个非常有用的功能，它为绘制图形和创建图像提供了很多便利。
在本文中，我们将深入探讨C语言中canvas的使用方法，并一步步回答。
让我们开始吧！首先，我们需要了解canvas是什么。
在C语言中，canvas是一个用来绘制图形和创建图像的虚拟画布。
它允许程序员使用一系列的绘图函数来创建和编辑各种图形，如直线、矩形、圆形、多边形等等。
通过使用canvas，可以使程序更加生动和具有交互性。
接下来，我们需要知道如何在C语言中使用canvas。
首先，我们需要包含相应的头文件。
在C语言中，canvas的头文件通常是`<graphics.h>`。
这个头文件中定义了一系列的绘图函数，我们可以直接使用。
使用canvas主要包括以下几个步骤：Step 1: 创建一个画布在使用canvas之前，我们需要首先创建一个画布。
在C语言中，我们可以使用`initgraph`函数来创建一个窗口，并获得一个画布的标识符。
下面是一个示例代码：#include <graphics.h>int main() {int gd = DETECT, gm;initgraph(&gd, &gm, "");你的代码closegraph();return 0;}这里的`gd`和`gm`是用来存储图形驱动和图形模式的变量。
`DETECT`是一个特殊的宏，用于自动检测图形驱动和图形模式。
`initgraph`函数将自动根据当前的系统环境来启动图形模式。
Step 2: 绘制图形一旦我们创建了画布，我们就可以开始绘制各种图形了。
C语言中的canvas提供了一系列的绘图函数，例如`line`、`rectangle`、`circle`等等。
下面是一个绘制直线的示例代码：#include <graphics.h>int main() {int gd = DETECT, gm;initgraph(&gd, &gm, "");line(100, 100, 200, 200);delay(5000); 延迟5秒closegraph();return 0;}这里的`line`函数用于绘制一条从(100,100)到(200,200)的直线。
canvas教程
canvas教程在本教程中，我们将学习如何使用Canvas进行绘制。
Canvas可以用于在网页上绘制图形，包括直线、弧线、矩形、圆形等等。
通过使用JavaScript，我们可以在网页上创建一个Canvas元素，并通过Canvas的上下文来绘制图形。
首先，让我们来创建一个Canvas元素。
我们可以使用HTML代码来创建一个Canvas元素，并设置其宽度和高度。
```html<canvas id="myCanvas" width="500" height="500"></canvas>```接下来，我们需要在JavaScript中获取到这个Canvas元素。
```javascriptconst canvas = document.getElementById('myCanvas');```一旦我们获取到Canvas元素，我们需要获得到Canvas的上下文。
Canvas的上下文是一个用于绘制的环境，我们可以在上面进行绘制操作。
```javascriptconst ctx = canvas.getContext('2d');```现在我们已经准备好开始绘制图形了。
让我们先绘制一个矩形。
```javascriptctx.fillRect(50, 50, 200, 100);```上面的代码表示在Canvas上绘制一个填充满的矩形，起始点坐标为(50, 50)，宽度为200，高度为100。
接下来，让我们来绘制一个圆形。
```javascriptctx.beginPath();ctx.arc(200, 200, 100, 0, Math.PI * 2);ctx.fillStyle = 'red';ctx.fill();```上面的代码首先开始了一个新的路径，然后绘制一个以(200, 200)为圆心，半径为100的圆形。
canvas画布基本知识点总结
canvas画布基本知识点总结HTML5的canvas元素使⽤JavaScript画图；<canvas width="600" height="400"> </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>关于线条的问题1. 默认宽度为1px2. 默认颜⾊⿊⾊3. 但是显⽰是灰⾊，2px宽度，原因是对其点是线的中⼼位置，会把线分成两个0.5px，显⽰的会是不饱和增加宽度；4. 解决⽅法：前或后移动0.5px即可；当要画多条不同样式的平⾏线时，存在样式覆盖问题，需要开辟新路径；<body><canvas width="600" height="400"></canvas><script>var myCanvas=document.querySelector("canvas");var ctx=myCanvas.getContext("2d");// 画平⾏线// 蓝⾊ 10pxctx.moveTo(100,100);ctx.lineTo(200,100);ctx.strokeStyle="blue";ctx.lineWidth=10;ctx.stroke();// 红⾊ 20pxctx.beginPath();//开辟新路径ctx.moveTo(100,200);ctx.lineTo(200,200);ctx.strokeStyle="red";ctx.lineWidth=20;ctx.stroke();// 绿⾊ 30pxctx.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.确定绘制⽅向（⼀般是默认的顺时针）directionvar 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默认 endctx.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);1. img图⽚对象、canvas对象、video对象2. 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是绘制图⽚的⼤⼩，绘制的图⽚不是裁剪⽽是前⾯截取图⽚的缩放的2d转换移动， translate（x,y）；移动的是坐标轴，不是绘制的内容缩放，scale（0.5,1），表⽰横坐标缩放0.5倍，纵坐标缩放1倍，缩放的是坐标轴，不是绘制的内容旋转，rotate()，旋转中⼼默认是坐标原点；。
总结html5-canvas学习笔记
总结html5-canvas学习笔记canvas是html5中很重要的⼀部分，我们可以⽤它来绘制各种平⾯图形， 3d图，动画等等。
每每看到⽹上超炫的html5页⾯，⾸先⽴马下载下来，⼼⾥想着有⼀天⾃⼰也可以做出这样酷炫的效果，骚年你是不是这样的！⽐如这样的：还有这样的（这个是3d效果，点击图⽚进去看看吧）：但是，功夫不是⼀天练成的，⼀门新技术不是你学着做个demo就掌握了的，我们先要⼀点⼀点地学习基础知识才⾏呀。
刚开始学html5的时候，我们都会先接触到canvas，api给的⽅法有很多，我是这样学的，⾃⼰写个demo，⼀个⽅法⼀个属性的去试，看它出来是个什么样⼦的。
在这⾥我主要标记⼀下，我在练习过程中，遇到的⼀些疑惑。
总结⼀下canvas.save()和canvas.restore()， canvas.beginPath()和canvas.closePath()怎么⽤。
先把代码拉出来：canvas.save()和canvas.restore()⽤法：save() 和restore()主要在对画布进⾏转换（如：扭曲，旋转，缩放等）时很⽤作⽤。
save()⽅法是保存画布当前状态的，restore()是取出画布保存的状态。
⽐如现在要对画布进⾏多个动作处理，第⼀个动作进⾏了缩放处理，如果在没有缩放处理前保存⼀下空⽩状态，那么再进⾏第⼆个动作新建时也会有第⼀个动作缩放效果的影响。
所以最好在对画布多个动作处理前，先canvas.save()保存⼀下空⽩状态或者你希望后⾯动作需要出现的状态，当前动作处理完了再canvas.restore()⼀下，取出保存的空⽩状态保证后⾯的动作不受影响。
/**图形变形**/var c10 = document.getElementById("myCanvas10");var cre10 = c10.getContext("2d");cre10.fillStyle = "#eeeeff";cre10.fillRect(0, 0, 300, 300);cre10.save();cre10.fillStyle = "rgba(255, 0, 0, 0.1)";cre10.translate(50, 50);cre10.scale(0.5, 0.5);cre10.rotate(Math.PI/4);cre10.fillRect(0, 0, 100, 100);cre10.restore();cre10.save();cre10.fillStyle = "rgba(255, 0, 0, 0.2)";cre10.rotate(Math.PI/4);cre10.translate(100, 100);cre10.scale(0.5, 0.5);cre10.fillRect(0, 0, 100, 100);cre10.restore();cre10.save();cre10.fillStyle = "rgba(255, 0, 0, 0.5)";cre10.translate(130, 130);cre10.scale(0.5, 0.5);cre10.shadowOffsetX = 10;cre10.shadowOffsetY = 10;cre10.shadowColor = "rgba(100, 100, 100, 0.5)";cre10.shadowBlur = 1.5;cre10.fillRect(0, 0, 150, 150);本来效果是这样的：如果去掉canvas.save()和canvas.restore()以后就是这样的：canvas.beginPath()和canvas.closePath()⽤法：这两个经常应⽤在绘制线条和圆弧中，可以成对⽤，也可以单独⽤，他们两个没有必然的联系。
前端笔记之Canvas
前端笔记之Canvas⼀、Canvas基本使⽤Canvas是HTML5的画布，Canvas算是“不务正业”的⾯向对象⼤总结，将⾯向对象玩极致。
算法为王！就是说canvas你不会，但是算法好，不怕写业务，不怕代码量，只要稍微学学API就能出活。
Canvas这⾥是HTML5新标签，直接要了flash的命。
1.1 Canvas简介MDN的Canvas在线⼿册：了解：是⼀个可以使⽤脚本(通常为)来绘制图形的元素.它可以⽤于绘制图表、制作图⽚构图或者制作简单的(以及)动画. 右边的图⽚展⽰了⼀些 <canvas> 的实现⽰例。
历史：<canvas> 最早由Apple引⼊WebKit，⽤于Mac OS X 的 Dashboard，随后被各个浏览器实现。
如今，所有主流的浏览器都⽀持它。
Mozilla 程序从 Gecko 1.8 () 开始⽀持 <canvas>。
它⾸先是由 Apple 引⼊的，⽤于 OS X 和 Safari。
Internet Explorer 从IE9开始⽀持<canvas> ，更旧版本的IE可以引⼊ Google 的项⽬中的脚本来获得<canvas>⽀持。
Chrome和Opera 9+ 也⽀持 <canvas>。
Canvas兼容到IE9。
1.2 Canvas⼊门canvas是HTML5中⽐较特殊的双标签，可以在body中放：<html><head><meta charset="UTF-8"/><title>Document</title><style type="text/css">canvas{border:1px solid #000;}</style></head><body><canvas width="600" height="400"></canvas></body></html>不能将width、height在CSS中设置，否则画布的像素的会被缩放，画⾯质量粗糙了。
Canvas知识点汇总
Canvas知识点汇总本⽂主要记录Canvas基础知识汇总。
1、Canvas定义<canvas>元素是HTML5中的新元素，通过它可以在⽹页中绘制出所需的图形。
<canvas>标签只是图形的容器，真正绘制图形需要使⽤脚本来完成。
通过使⽤Canvas可以绘制路径,图形、字符以及添加图像。
可以做出⾮常炫酷的各种特效效果。
兼容性：ie9+2、Canvas基本使⽤2.1 创建画布和对象<canvas id="myCanvas" width="300" height="200"></canvas>默认情况下，canvas没有边框，没有内容，默认是300150的画布。
如果要重新设置宽⾼，可以直接在标签上制定宽⾼属性。
也可以在js中制定。
不可以使⽤CSS属性来设置，因为canvas是⼀个画布（可以理解是⼀张图⽚），通过CSS设置属性的宽⾼会使canvas中的内容按300150时的⽐例放⼤或缩⼩。
var canvas = document.getElementById('myCanvas');//创建 context 对象var ctx = canvas.getContext('2d');Canvas 元素本⾝是没有绘图能⼒的，所有的绘制⼯作必须在 JavaScript 内部完成。
getContext(“2d”) 对象是内建的 HTML5 对象，是获取canvas上下⽂的环境。
它拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。
所有的绘制都是使⽤其接⼝⽅法实现的。
2.2 绘制线条moveTo(x,y)：把路径移动到画布中的指定点lineTo(x,y)：添加⼀个新点stroke()：绘制线条，默认是⿊⾊，如果需要指定样式，需要在绘制前指定。
lineWidth：指定线条的宽度strokeStyle：指定线条的颜⾊setLineDash([])：指定线条的虚线间隔// 画线条ctx.moveTo(150, 50);ctx.lineTo(100, 100);ctx.lineTo(200, 100);ctx.lineTo(150, 50);ctx.lineWidth = 3;ctx.strokeStyle = "red";ctx.setLineDash([3]);ctx.stroke();2.3 填充颜⾊fillStyle：指定填充的颜⾊fill()：颜⾊填充// 颜⾊填充ctx.fillStyle = "blue";ctx.fill();2.4 绘制多图像beginPath()：通过清空⼦路径列表开始⼀个新路径closePath()：将笔点返回到当前⼦路径起始点的⽅法//绘制绿⾊的线条ctx.beginPath();ctx.moveTo(200, 100);ctx.lineTo(200, 200);ctx.lineTo(100, 200);ctx.lineTo(100, 100);ctx.setLineDash([0]);ctx.strokeStyle = "green";ctx.stroke();canvas绘图是⼀种基于路径的绘图，通过绘制路径来绘制图形，路径是⼀系列点的集合。
Canvas基础知识学习
Canvas 基础知识学习<canvas>是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。
例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。
元素<canvas>是WhatWG Web applications 1.0也就是大家都知道的HTML 5标准规范的一部分。
并不是所有现代浏览器都支持<canvas>元素，所以你需要Firefox 1.5或更新版本、或者其他基于Gecko的浏览器例如Opera 9、或者最近版本的Safari才能看到所有示例的动作。
1.基本用法<canvas>元素让我们从<canvas>元素的定义开始吧。
<canvas id="tutorial" width="150" height="150"></canvas><canvas>看起来很像<img>，唯一不同就是它不含src 和alt 属性。
它只有两个属性，width和height，两个都是可选的，并且都可以DOM 或者CSS 来设置。
如果不指定width 和height，默认的是宽300像素，高150像素。
虽然可以通过CSS 来调整canvas的大小，但渲染图像会缩放来适应布局的（如果你发现渲染结果看上去变形了，不必一味依赖CSS，可以尝试显式指定canvas的width 和height 属性值）。
id 属性不是<canvas>专享的，就像标准的HTLM标签一样，任何一个HTML元素都可以指定其id 值。
一般，为元素指定id 是个不错的主意，这样使得在脚本中应用更加方便。
<canvas>元素可以像普通图片一样指定其样式（边距，边框，背景等等）。
然而这些样式并不会对canvas实际生成的图像产生什么影响。
HTML5之Canvas标签简要学习
摘要：HTML5 提供了画布（canvas）标签，通过与Javascript结合使用，可以在网页上绘制图像。
Canvas是一个矩形区域，使用Javascript可以控制其每一个像素。
本文将对canvas标签进行简要的学习。
HTML5 提供了画布（canvas）标签，通过与Javascript结合使用，可以在网页上绘制图像。
Canvas是一个矩形区域，使用Javascript可以控制其每一个像素。
本文将对canvas标签进行简要的学习。
1、canvas标签说明canvas标签是一个矩形区域，它包含两个属性width和height，分别表示矩形区域的宽和高，这两个属性都是可选的，并且都可以通过css来设定，他们的默认值是300px和150px。
canvas在网页中的形式如下：解析：为canvas设置id属性是便于Javascript调用；第二行是当浏览器不支持canvas标签时，将显示这行文字。
2、检测浏览器支持Canvas标签并没有得到目前所有浏览器的支持，因此在使用canvas绘图的时候，要先检测客户端浏览器是否支持。
下面的示例将通过Javascript判断浏览器是否支持：解析：上面的Javascript代码通过判断getContext方法是否为空来判断浏览器是否支持canvas标签。
3、绘制线条和图案在没有canvas之前，想要在网页上面绘制线条或图案，是非常麻烦且不兼容的。
我曾在《js画直线》一文中转载了网络上常用的在IE和FF中绘制线条的方法，但如果想要这些方法通用，则是不可能的。
但现在有了canvas标签，一切就变得简单了。
现在，你只需要在页面上添加canvas标签，并通过Javascript调用它的相应方法，就可以轻松的在页面上绘制线条和图案。
解析：显示在页面中放置了一个canvas标签，设定id、width、height等属性，并为这个标签设定边框。
在Javascript中检测浏览器是否支持当浏览器支持的时候开始调用getContext方法获得绘图的上下文（这地方很像vc中的GDI绘图~~），目前只提供了2D上下文，将来还有可能支持OpenGL ES的3D上下文。
黑马程序员：前端阶段笔记之Canvas第一天
规定渐变对象中的颜色和停止位置
线条样式属性和方法
属性
描述
lineCap
设置或返回线条的结束端点样式
lineJoin
设置或返回两条线相交时，所创建的拐角类型
lineWidth
设置或返回当前的线条宽度
miterLimit
设置或返回最大斜接长度
矩形方法
方法
描述
rect()
创建矩形
toDataURL()
返回caБайду номын сангаасvas图像的URL
颜色、样式和阴影属性和方法
属性
方法
fillStyle
设置或返回填充绘画的颜色、渐变或模式
strokeStyle
设置或返回笔触的颜色、渐变或模式
shadowColor
设置或返回阴影的颜色
shadowBlur
设置或返回用于阴影的模糊级别
shadowOffsetX
data
返回一个对象，其包含指定的ImageData对象的图像数据
方法
描述
createImageData()
创建新的、空白的ImageData对象
getImageData()
返回ImageData对象，该对象为画布上指定的矩形复制像素数据
putImageData()
把图像数据（从指定的ImageData对象）放回画布上
创建弧/曲线（用于创建圆形或部分圆）
arcTo()
创建两切线之间的弧/曲线
isPointInPath()
如果指定的点位于当前路径中，返回布尔值
转换方法
方法
描述
scale()
缩放当前绘图至更大或更小
canvas绘图详解笔记之线条及线条属性
canvas绘图详解笔记之线条及线条属性创建 canvas⾸先创建⼀个canvas元素，我们只需要在html⽂件中加⼊这么⼀句代码：<canvas id="canvas">当前浏览器不⽀持canvas，请更换浏览器使⽤！</canvas>同时我们也可以通过canvas的标签属性width和height设置canvas画布的⼤⼩：<canvas id="canvas" width="800" height="800">当前浏览器不⽀持canvas，请更换浏览器使⽤！</canvas>当然，我们也可以通过js来设置canvas的宽⾼，下⽂会提到如何设置。
接下来我们就在js中获取到该canvas元素，然后设置它的宽⾼，并获取到上下⽂的环境：var canvas = document.getElementById("canvas");//获取到canvas元素//设置宽⾼canvas.width = 800;canvas.height = 800;var context = canvas.getContext("2d");//获取上下⽂的环境接下来我们的所有操作都是基于这个context的上下⽂环境。
现在画⼀条简单的直线：context.moveTo(100,100);context.lineTo(500,500);moveTo()⽅法表⽰⼀次绘制的起点坐标，lineTo()表⽰基于上⼀个坐标点到这个坐标点之间的直线连接。
注意的是，canvas是基于状态的绘制，⽽不是基于对象的绘制。
所以，上⾯代码都是状态的设置，我们还需要使⽤stroke()⽅法进⾏绘制：context.stroke();//绘制除此之外，我们还可以设置线条的⼀些基本属性：context.lineWidth = 8;//线条的宽度context.strokeStyle = "#333";//线条的颜⾊⼀个简单的绘制⼀条直线的完整例⼦：var canvas = document.getElementById("canvas");//获取到canvas元素//设置宽⾼canvas.width = 800;canvas.height = 800;var context = canvas.getContext("2d");//获取上下⽂的环境//canvas 是基于状态的绘制，⽽不是对象context.moveTo(100,100);context.lineTo(500,500);context.lineWidth = 8;//线条的宽度context.strokeStyle = "#333";//线条的颜⾊context.stroke();//绘制运⾏结果如下图：接下来我们绘制⼀个连续折线：运⾏结果如下：如果我们想要让这个折线闭合形成⼀个矩形的话，可以再设置context.lineTo(100,100);然⽽如果线条的宽度⽐较⼤的时候，就会出现⼀些瑕疵，这个的话⼤家⾃⼰试试看。
H5：画布Canvas基础知识讲解（三）之文字、阴影、颜色渐变
H5：画布Canvas基础知识讲解（三）之文字、阴影、颜色渐变上一节介绍了H5：画布Canvas基础知识讲解（二）之插入图像、像素级操作，接下来继续讲解H5：画布Canvas基础。
文字虽然最近的WebKit版本和Firefox 3.1 nightly build才开始支持Text API，为了保证文章完整性我决定仍在这里介绍文字API。
context对象可以设置以下text属性：font：文字字体，同CSS font-family属性；textAlign：文字水平对齐方式。
可取属性值: start,end,left,right,center。
默认值：start；textBaseline：文字竖直对齐方式。
可取属性值：top,hanging,middle,alphabetic,ideographic,bottom。
默认值：alphabetic。
有两个方法可以绘制文字：fillText和strokeT ext。
第一个绘制带fillStyle填充的文字，后者绘制只有strokeStyle边框的文字。
两者的参数相同：要绘制的文字和文字的位置(x,y)坐标。
还有一个可选选项——最大宽度。
如果需要的话，浏览器会缩减文字以让它适应指定宽度。
文字对齐属性影响文字与设置的(x,y)坐标的相对位置。
ontext.fillStyle = '#00f';context.font = 'italic 30px sans-serif';context.textBaseline = 'top';context.fillText ('Hello world!', 0, 0);context.font = 'bold 30px sans-serif';context.strokeT ext('Hello world!', 0, 50);可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Canvas画布1.canvas标签严禁使用CSS调整canvas画布的大小。
<canvas width="600" height="600">您的破浏览器有不支持了！</canvas>2.canvas的属性Width 用户设置canvas画板的宽度Height 用于设置canvas画板的高度。
使用CSS可以设置canvas画布的显示大小无法设置其绘图面积，所以不推荐使用。
3.canvas的方法getContext() 用于获取canvas元素的绘图环境，所有绘图操作必须在绘图环境下操作.绘图环境也叫做绘图上下文。
Canvas元素.getContext(‘2d’); 获取2D绘图环境4.绘图操作(绘图环境的成员context.font属性用于设置字体的风格大小和0字体类型等格式：context.font([粗体],[斜体],大小,字体)；该属性设置对描边文字和填充文字都有效context.fillStyle属性用于设置填充类型的画笔的样式格式：context.fillStyle=’颜色值’所有CSS3的颜色类型都可以支持context.strokeStyle属性用于设置描边类型的画笔的样式格式：context.strokeStyle=’颜色’;注意：设置style时一般使用颜色设置，实际上可以使用渐变设置但是需要渐变对象。
所以不叫strokeColor而是叫strokeStyleContext.fillText() 方法用于使用填充画笔进行文字绘制格式：context.fillText(‘文字内容’,x坐标,y坐标);Context.strokeText()方法用描边画笔进行文字绘制格式：context.strokeText(‘文字内容’,x坐标,y坐标);Context.moveTo() 将画笔移动到指定的位置格式：context.moveTo(x1,y1);Context.lineTo() 将画笔从开始位置连线到结束位置格式:contxt.lineTo(x2,y2);注意：使用路径操作时，绘制方法只是在内存中进行预先绘制，并没有实际操作到画布当中，如果需要画布中显示，则需要封闭路径的相关操作。
Context.stroke() 使用描边画笔将路径绘制出来格式：Context.stroke()无参数Context.textAlign=位置值位置值：start 以文字的起始位置对齐Center 以文字的中心位置对齐End 以文字的结束位置对齐Context.textBaseLine属性设置文字的垂直对齐方式（基于起始位置）Context.textBaseline=位置值位置值：Top 顶部对齐Middle 剧中对齐Bottom 底部对齐Alphabetic 用于绘制拉丁字母的字符串Ideographic 用于绘制中文或者日本的象形字符串Hanging 用于绘制印度语言字符串矩形绘制:Context.fillRect() 填充一个矩形(实心)Context.fillRect(起始x,起始y,宽度,高度);Context.strokeRect() 描边一个矩形(空心)Context.strokeRect(起始x,起始y,宽度,高度);Context.clearRect() 清除一个矩形区域内的内容Context.clearRect(起始x,起始y,宽度,高度));注意：在绘制矩形时，一般不需要路径操作，隐藏了路径操作。
设置矩形的颜色根据fillRect和strokeRect 分别使用fillStyle 和strokeStyle进行颜色相关设定。
颜色和透明度设置：在设置style的颜色的时候可以使用两种方式：颜色值或者渐变值颜色值：可以使用CSS3的所有颜色表示方式HEX模式,单词模式,RGB模式,RGBA模式HSL模式,HSLA模式渐变值:需要借助渐变创建方法context.createLinearGradient() 创建一个线性渐变对象格式:createLinearGradient(起始x,起始y,结束x,结束y);返回值：一个线性渐变对象Context.createRadialGradient() 创建一个径向渐变对象格式：createRadialGradient(起始圆心x,起始圆心y，起始圆半径r,结束圆心x，结束圆心y，结束圆半径r);返回值：径向渐变对象渐变对象.addColorStop() 为渐变对象添加颜色和位置格式：addColorStop（位置,颜色）位置必须是0-1之间的小数表示0%-100%透明度设置：设置透明度可以在颜色中直接设置，填充或者描边时就是使用该透明颜色绘制。
Context.globalAlpha属性设置当前画布的全局透明度注意：该属性值为0~1之间的小数设置该属性后，当前画布绘制的内容都会使用该透明度设置，但是属性设置之前的代码不受影响。
绘制圆形;Context.arc() 绘制一个指定的弧线格式:arc(圆心x,圆心y,半径r,开始弧度,结束弧度,绘制方向);弧度转换: Math.PI/180*角度绘制方向：false 顺时针ture 逆时针非零填充规则：所有路径绘制的时候都有方向。
如果产生和闭合路径在填充的时候就要使用非零填充规则进行填充操作。
设定设定顺时针路径为1，逆时针路径为-1.在闭合区域向外部引出一条直线(一般最近的即可，经过最少路径的)根据经过的路径计算值，没经过一条顺时针路径+1，经过一条逆时针路径-1，如果最终结果为0，则该区域不填充颜色，其他无论值为多少，fill操作都会填充该区域。
线帽属性：context.lineCap 用于设置线帽的类型Butt 原装无线帽Round 圆角线帽Square 矩形线帽注意：线帽是在原有线长度的两端分别增加了一个线帽，所以设置线帽后，线的长度会增加。
，Context.lineJoin 用于设置相交线段角的处理方式Miter 默认值延展成尖角Round 圆角Bevel 切角注意:必须2条线段在一个路径中绘制才会产生角的处理方式，如果单独绘制2条线段不会存在角的问题。
（产生角就是连续的两次lineTo）=================================================== 圆型绘制：Context.arc(); 绘制圆弧Context.arc(圆心x,圆心y,半径,开始弧度,结束弧度,绘制方向);Context.arcTo(); 绘制一条圆弧路径context.arcTo(第二个点x,第二个点y,第三个点x,第三个点y,半径)注意：arcTo是应用切线绘制弧，需要两条相交的线段，一般由moveTo的坐标和第二个点的坐标构成第一条线，第二个点坐标和第三个点坐标构成第二条线。
路径方法：beginPath() 开始一条新路径，通常第一个路径不需要使用closePath() 关闭一条路径，通常不使用，因为stroke()、fill()、clip()都可以关闭路径。
moveTo() 将画笔移动到指定位置lineTo() 将路径连线至指定位置rect() 绘制一个矩形路径fill() 填充一个路径stroke() 描边一个路径clip() 限定一个路径区域方法：fillRect() 填充一个矩形区域= rect+fillstrokeRect() 描边一个矩形区域= rect +strokeclearRect() 清除一个矩形区域内的内容渐变方法：createLinearGradient() 创建一个线性渐变对象createRadialGradient() 创建一个径向渐变对象addColorStop() 添加渐变颜色和位置状态方法：save() 保存之前的绘图环境restore() 恢复之前的绘图环境注意：save相当于保存之前的环境，开始了一个新的绘图环境，restore可以恢复之前的环境。
Save和restore之前可以认为是一个新的图层。
Restore只能恢复最近的一次save操作.变形：translate() 坐标平移原点方法Context.translate(新原点x,新原点y);注意：设置完之后x和y所在的位置就是新的0,0点scale() 画布缩放Context.scale(水平缩放比,垂直缩放比)Rotate() 旋转画布操作Context.rotate(弧度)ttansform（）矩阵转换操作(综合变形设定)Context.transform(水平伸缩比,垂直扭曲值,水平扭曲值,垂直伸缩比,平移x,平移y)剪辑区域Clip() 设置剪辑路径注意：设置剪辑路径之后意味着所有的操作都只能限定在当前剪辑路径当中。
剪辑路径在使用时一般会保存绘图环境。
路径混合方式GlobalCompositeOperation() 设置重叠图像的处理方式请参照手册写进去图像和视频的操作图像操作drawImage(图像信息,画布x,画布y)drawImage(图像信息,画布x,画布y,画布w,画布h)drawImage(图像信息,图像x,图像y,图像w,图像h，画布x,画布y,画布w,画布h)注意：使用图像操作时需要保证在图像加载完毕的情况下使用，一般在img.onload事件中操作像素获取保存及恢复getImageData() 获取一个指定区域内的所有像素信息格式：context.getImageData(画布x,画布y,画布w,画布h);返回一个图像对象：成员：Width 当前获取的图像的宽度Height 当前获取的图像的高度Data 当前获取的图像像素点集合Data中是一个数组，其中每4个元素表示一个像素点[像素1的红色,像素1的蓝色，像素1的绿色,像素1透明度,像素2的红色,像素2的蓝色，像素2的绿色,像素2透明度,像素3的红色,像素3的蓝色，像素3的绿色,像素3透明度, .....]像素的颜色和透明度的取值都是0-255putImageData();格式：context.putImageData(图像像素对象,画布x,画布y);格式：context.putImageData(图像像素对象,画布x,画布y,相对于截图x,相对于截图y,显示截图w,显示截图h);createImageData() 创建一个指定区域的imgedata对象主要用于复制一块图像区域格式:context.createImageData(宽,高)；格式:context.createImageData(图像信息对象)；赋值操作动画播放方法：window.requestAnimationFrame(回调函数) 帧循环动画方法格式：window.requestAnimationFrame(animate)回调函数Function animate(){//检测视频是否播放完毕if(!m //将视频内容和规制到画布中cxt.drawImage(myvideo,0,0,600,600);//递归函数window.requestAnimationFrame(animate);window.requestAnimationFrame(animate)}播放视频时可以获取video视频标签也可以new Video元素类似于image的操作方式.。