前端开发动画 canvas起步

智能社前端开发全套视频 百度前端开发面试题目 前端开发需要几个浏览器
例:做游戏(白鹭引擎)
动画
图表
频谱
HTML5不只是单纯的html
canvas本身是一个标签<canvas></canvas> 是一个空白的“画布”默认大小300*150;
本身有宽高的属性,不需要使用css去设置
如果要设置宽高,一定要和canvas的宽高设置相同,不然绘制出来的内容就是变形的;
<canvas></canvas> 是一个空白的“画布“
如果希望“画布”上面有内容,需要通过js来绘制 -> 通过画布的上下文(也类似舞
台)进行绘制;
使用canvas
1.创建空白画布
2.获得画布的上下文
3.绘制的准备(画笔的宽、颜色、所需的资源
4.开始绘制
HTMLCanvasElement
var canvasEle = document.getElementById(“box”);
//设置全屏大小innerWidth、innerHeight
canvasEle.width = innerWidth;
canvasEle.height = innerHeight;
方法:
getContext(inDOMString contextID) 可以传2d或者experimental-webgl(图形图像处理);
toDataURL()把canvas对象转成URL -> 生成带有绘制内容的一个资源链接地址;
CanvasRenderingContext2D
提供了绘制、设置绘制内容的方法属性
fillStyle:设置填充的样式(充满);
strokeStyle:设置轮廓的样式(不充满);
fillRect(x,y,width,height) 绘制矩形的方法
画线条的方法:
moveTo(x,y);抬起笔,要落到哪一个位置;
lineTo(x,y);画线到某个点;
stroke(不传||path2D);绘制
lineWidth:设置笔画宽度的属性:
beginPath();标识,要开始一个路径
closePath();标识,要结束一个路径,会自动闭合开始点和结束点;
clearReact():清除矩形范围之内的内容;
createLinearGradient(x0,y0,x1,y1):线性渐变 -> CanvasGradient
strokeText(text,x,y,maxWidth) 绘制文字
arc(x,y,radius,startAngle,anticlockwise)绘制弧线x,y原点 radius 半径
startAngle,endAngle起始和结束的角度,是否是逆时针;
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); 绘制贝赛尔曲线
参考点1x,参考点1y,参考点2x,参考点2y,终点x,终点y
scale(x,y):放大缩小,不会影响到画布本身,缩放的是画布里面的内容(视觉效果)
save():保存画布上面之前的 样式(笔画宽度、颜色、变形、样式),
restore():还原上一次的状态;如果没有保存状态,此方法不做任何改变。
translate():平移,一花不的原点(0,0)位参考;
rotate(angle):旋转角度 -> 弧度计算 PI/180*角度 -弧度,最终旋转的以弧度为单位
canvas动画的实现:
1.通过不断刷新canvas里面的内容,实现动画;
2.清除上一次canvas里面的内容
CanvasGradient
设置canvas里面颜色渐变的类;
可以通过设置颜色的方式(fillStyle\strokeStyle) 去设置渐变对象;
方法:
addColorStop(offset(0-1), color);
这个方法可以多次调用添加简便的颜色值;
html手机前端开发视频 前端开发工具编辑器 python前端界面开发工具
» 本文来自:前端开发者 » 《前端开发动画 canvas起步》
» 本文链接地址:https://www.rokub.com/38116.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!