Canvas学习笔记

程序笔记 前端之家
前端之家收集整理的这篇文章主要介绍了Canvas学习笔记，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

反正我是觉得markdown不如博客园的默认编辑器好用= = 把有道的笔记搬到博客园。。

慕课网视频《  》&《  》笔记

↑老师讲的很好，不过语速很慢，二倍速刚好。

通过  即可创建一个canvas。

不建议直接使用css的方式指定大小。css指定的是显示的大小，通过height和width指定的是显示的大小以及分辨率的大小。

JavaScript中指定canvas宽高。

canvas = document.getElementById('canvas'canvas.width = 1024<span style="color: #000000;">;
canvas.height = 768;

canvas 绘图主要通过 canvas.getContext 的获得的上下文的 api 实现。

context = canvas.getContext('2d');

canvas坐标轴 ：左上角为原点，向右为x轴，向下为y轴。

canvas 是基于状态的绘图。

100,100700,700100,100context.fillStyle = 'rgb(233,233,233)'<span style="color: #000000;">;
context.fill();

context.lineWidth = 5<span style="color: #000000;">;
context.strokeStyle = '#123456'<span style="color: #000000;">;

context.stroke();

context.beginPath();
context.moveTo(200,600<span style="color: #000000;">);
context.strokeStyle = 'black'<span style="color: #000000;">;
context.stroke();

moveTo(x,y) 画笔移到(x,y)。

lineTo(x,y) 从当前点到(x,y)画一条。

stroke() 把当前的路径绘制出来，但并不会清空当前状态（也就是说下一次调用stroke之前绘制的会再次被绘制）。

fill() 如果路径不是封闭的，会把路径首尾相连。

beginPath() 开始一段新的路径，也就是说，此后再次调用stroke()的时候，之前的线条不会被重新绘制。同时清空当前坐标。（紧接着的lineTo()相当于moveTo()）

closePath() 结束一段路径。如果路径没有封闭，就将路径首尾连接起来。

context.lineWidth,context.strokeStyle 设置绘制线条宽度和样式。

context.fillStyle 设置填充样式。

绘制圆和弧

startAngle,endAngle, anticlockwise = context.arc(300,300,200,1.5 * Math.PI,);

通过定时器不断更新状态重新绘制

清空指定区域   

 

效果

index.html

countdown.js 和老师写的不完全一样，因为我懒得看了，所以小部分偷懒自己瞎写的

digit.js 这个是复制老师的

封闭多边形的首尾交点会有缺口，使用  能解决这个问题。

绘制封闭多边形最好成对使用   和  

先绘制线条再填充颜色，边框的一半会被填充色覆盖。所以先绘制填充色再描边。

绘制矩形api： 

ctx.fillRect(x,height);

ctx.strokeRect(x,height);

fillStyle 和 strokeStyle 支持所有CSS支持的颜色表示。

线条的属性

  • lineCap 线条两端的形状： butt （默认，平的）round（圆的） square（方的） 后面两个比较butt会突出来。只用于线段结尾处，不用于连接处。
  • lineJoin 线条连接处形状： miter（默认，尖角）bevel（平的） round（圆角）miter
  • lineJoin 为 miter 时，延长线长度大于miterLimit，会自动变为bevel。miterLimit 默认为10。

图形变换

位移、旋转、缩放。

  默认多个translate会叠加。

  

  不仅会缩放长度、宽度，还会缩放坐标、边框长度等属性。

save(); restore(); 成对出现，中间绘图状态不会对后面造成影响。

context.transform(); 效果会叠加

如果需要重新初始化矩阵变换的值，用:    会使得之前设置的 context.transform() 失效

样式填充

线性渐变

grd =添加任意个 stop[0,1]之间的数字

<span style="color: #0000ff;">var grd = context.createLinearGradient(200,800,800<span style="color: #000000;">);
grd.addColorStop(0.0,'#f00'<span style="color: #000000;">);
grd.addColorStop(1.0,'#000'<span style="color: #000000;">);
context.fillStyle = grd;

径向渐变

图片填充

bgImg = = 'https://img1.mukewang.com/5333a1bc00014e8302000200-140-140.jpg'= pattern = context.createPattern(bgImg,'repeat'=0,800

用另外一个canvas填充

bgCanvas = pattern = context.createPattern(bgCanvas,'repeat'=0,800<span style="color: #0000ff;">function<span style="color: #000000;"> createBackgroundCanvas() {
<span style="color: #0000ff;">var canvas = document.createElement('canvas'<span style="color: #000000;">);
canvas.width = 100<span style="color: #000000;">;
canvas.height = 100<span style="color: #000000;">;
<span style="color: #0000ff;">var context = canvas.getContext('2d'<span style="color: #000000;">);
drawStar(context,50,50,0); <span style="color: #008000;">//<span style="color: #008000;"> 之前的课程中写的的
<span style="color: #0000ff;">return<span style="color: #000000;"> canvas;
}

用 video 填充...

其中 repeat-style 可选值 no-repeat/repeat-x/repeat-y/repeat

绘制圆弧。

context.arc( centerX,startAngle,anticlockwise = false )

    (x1,y1)是控制点，(x0,y0,x1,y1)作为第一条切线， (x1,y2)作为第二条切线，radius是弧线半径圆弧。起点是当前所在点(x0,y0)，到第一个切点作直线，然后画弧，终点是第二个切点。

贝塞尔二次曲线。指定起始点，控制点，终点。

context.quadraticCurveTo(control_x,control_y,targetx,targety);

贝塞尔三次曲线。指定起始点，控制点1，控制点2，终点。 

context.quadraticCurveTo(control_x1,control_y1,control_x2,control_y2,targety);

文字渲染

文字样式

ctx.font = fontStyle; ctx.font = font-style font-variant font-weight font-size font-ctx.font = 'bold 40px Arial'<span style="color: #000000;">;
ctx.fillStyle = '#058'<span style="color: #000000;">;
ctx.strokeStyle = 'yellow'<span style="color: #000000;">;
ctx.fillText('文字',100,100<span style="color: #000000;">);
ctx.strokeText('文字',100);

文字对齐

水平对齐方式 left(default) center right

ctx.textAlign = 'left';

垂直对齐方式 top middle bottom alphabetic(default) hanging alphabetic

ctx.textBaseline = 'top';

文本的度量

获取文本宽度，使用前要先设置 font 属性

ctx.measureText(string).width;

阴影

context.shadowColor

context.shadowOffsetX

context.shadowOffsetY

context.shadowBlur

全局属性

ctx.globalAlpha=0.2;

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。

显示源图像。显示源图像。源图像位于目标图像之外的部分是不可见的。显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。显示目标图像。显示目标图像。源图像之外的目标图像部分不会被显示。显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。显示源图像 + 目标图像。显示源图像。忽略目标图像。 

、、、、、

猜你在找的程序笔记相关文章

解决Connection to `ssl://pecl.php.net:443' failed
这个问题和curl无法访问https资源是类似的,现在curl可以访问https资源,但是使用pecl安装扩...
Chrome无法显示全网址怎么处理？Chrome系浏览器显示完整地址
在浏览器输入chrome://flags/回车，找到Omnibox UI Hide Steady-State URL Scheme and Tri...
Ubuntu 18.04安装arm-linux-gcc交叉编译器的两种方法(附下载地址)
方法一： 我们都知道Ubuntu有一个专门用来安装软件的工具apt，我们可以用它来全自动安装ar...
VCODE修改控制台编码格式解决输出乱码问题
中文的windows下的cmd默认使用GBK的编码，敲代码时，页面使用的是UTF-8(65001),而powershe...
编译busybox错误汇总
提示错误: arm-linux-gcc:Command not found PATH里有/usr/oca/arm/bin，但是make的时候，...
Bundle SPFX 文件时报错 “The build failed because a task wrote output to stderr.”的解决办法
在使用gulp bundle --ship对spfx项目进行编译的时候，出现“The build failed because a t...
处理Graph API .NET SDK 的分页请求
当使用Graph API进行查询的时候，如果结果过多，Graph API会对返回结果进行分页。 例如，下...
自动化部署SharePoint Online modern site的注意事项
整个流程是用户在SharePoint site里发起创建新team site的请求，管理员审核通过后，Power ...
安装Office套件和Visio可能遇到的问题
相关描述 安装可能出现的问题： 电脑系统： win10 教育版 本次安装版本为： Office 2016 c...
打印机相关整理
佳能打印机清零 版本号：佳能 ip2788 出现问题：错误代码：5B00 原因：打印机计数满，需要...
程序笔记SEO
完整地址全网址.get_attribuGraph Explor网站seo命令报错替换php7采撷记（一）WTF?HOMEBREW_GITFormData对象数据模型的关依赖关系查询iOS开发常用宏util.js----常UILabel 设置reverseadminphp匹配中文ngconf当前前提是字mongo执行比较mongo实现子文--换用Sublimjs moduleUse Laravel throttle 实现YII2 程序内获YII2 MongoDBjs根据偏移计--Linux下重要