分类导航
程序笔记

Canvas学习笔记

发布时间：2019-11-07 发布网站：大佬教程
大佬教程收集整理的这篇文章主要介绍了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,);

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

清空指定区域   

 

Canvas学习笔记

index.html

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

digit.js 这个是复制老师的

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

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

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

绘制矩形api： 

ctx.fillRect(x,height);

ctx.strokeRect(x,height);

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

线条的属性

Canvas学习笔记

图形变换

位移、旋转、缩放。

  默认多个translate会叠加。

  

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

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

context.transform(); 效果会叠加

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

样式填充

线性渐变

grd =

<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)，到第一个切点作直线，然后画弧，终点是第二个切点。

Canvas学习笔记

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

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 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。

 

、、、、、

大佬总结

以上是大佬教程为你收集整理的Canvas学习笔记全部内容，希望文章能够帮你解决Canvas学习笔记所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群：277859234，请注明来意。
标签：Canvas学习笔记
猜你在找的程序笔记相关文章
其他相关热搜词更多
中php如何使用2javascriptJavaPythoncocos编程问答c#csschtmlrubyjsd3cocos2d文件
全站导航更多
PHPJavaPythonC#C&C++RubyVBasp.NetGoPerlHTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsoniOSAndroidSwiftHybridCocos2d-xFlutterGitSVNJenkinsSSHsysTemdHBuilder安装教程算法设计模式正则表达式wordpressDedecmsphpcmsDiscuz帝国CMSLinuxWindowsCentOSUbuntuNginxMemcacheApacheRedisDockerBashMySQLMsSQLOracleSqlitePostgre SQLMariadbMongoDBNoSQLOceanBase前端面试题后端面试题运维面试题程序笔记
最新程序笔记教程
热门程序笔记教程