
canvas
文章平均质量分 86
canvas学习记录
乌鸡鲅鱼s
这个作者很懒,什么都没留下…
展开
-
canvas的基础使用
x,y为圆心坐标,r为半径,startAngle起始角度,endAngle终点角度,anticlosewise为旋转方向(true逆时针,false顺时针,默认顺时针):保存canvas的状态。save之后可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。:恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。图形是线条构成的,线条是由路径绘制而成。如:三角形就是由三条路径绘制而成。canvas绘图时以画布左上角坐标为原点(0,0)绘图。:顺时针旋转坐标轴。原创 2024-06-04 10:27:09 · 2375 阅读 · 0 评论 -
用canvas绘制钟表动效
angle:旋转角度(每隔多少角度显示一个刻度)* lineY:终点y坐标(坐标越远,指针越长)//移动坐标轴原点到(250,250),方便指针旋转。* strokeType:时、分、秒针。* strokeColor: 描边颜色。* strokeColor: 描边颜色。* lineWidth:线条宽度。* lineWidth:线条宽度。* moveX:起点x坐标。* lineX:终点x坐标。* angle:旋转角度。* num:刻度数量。原创 2024-06-04 14:00:25 · 519 阅读 · 0 评论 -
使用canvas制作雪花降落特效
/绘制雪花(圆),y坐标每次+0.5达到降落效果。//存放200个雪花,x坐标,y坐标,r半径。达到降落效果,反之可以制作粒子上升效果。//超过页面高度,重新渲染位置。原创 2024-06-04 15:06:48 · 396 阅读 · 0 评论 -
使用canvas制作粒子上升特效
/绘制雪花(圆),y坐标每次-0.5达到降落效果。另一种渲染图片粒子渲染效果,可以换成想要的任意图片。达到粒子上升效果,反之可以制作雪花降落效果。//存放200个粒子,x坐标,y坐标,r半径。//存放200个粒子,x坐标,y坐标,r半径。//绘制图片,y坐标每次-0.5达到降落效果。//小于页面高度,重新渲染位置。//小于页面高度,重新渲染位置。第一种圆点粒子渲染效果。原创 2024-06-04 15:51:55 · 661 阅读 · 0 评论 -
使用canvas绘制动态太极图
/将太极图分为两半,上部分黑,下部分白。//绘制上半部分黑圆。//绘制下半部分白圆。原创 2024-06-05 09:40:53 · 524 阅读 · 0 评论