分类导航

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,请注明来意。