canvas
关注
分享
扫一扫
梅花三
我有故事，可我不说
展开
-
canvas - 旋转
canvas是基于状态绘制的，每次平移、旋转、缩放、矩阵等变换之前，先调用save()保存当前绘图状态，变换结束之后，若要继续使用变换之前的状态，调用restore()方法即可。 效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #cvs { backgrou原创 2020-05-10 15:44:01 · 415 阅读 · 0 评论 -
canvas - Bezier 贝塞尔曲线
二次贝塞尔：quadraticCurveTo(cpx, cpy, x, y) 三次贝塞尔：bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) cpx和cpy是控制点坐标，x和y是终止点坐标 效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&g原创 2020-05-10 15:17:15 · 414 阅读 · 0 评论 -
canvas - 圆形
使用 arc() 或 arcTo() 方法画圆形 效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #cvs { background-color: #ccc; } </style> </head> <body> &原创 2020-05-10 12:45:50 · 215 阅读 · 0 评论 -
canvas - 填充
渐变填充 颜色 效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #cvs { background-color: #ccc; } </style> </head> <body> <div id='contai原创 2020-05-10 09:03:20 · 324 阅读 · 0 评论 -
canvas - 矩形
效果图： 完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #cvs { background-color: #ccc; } </st...原创 2020-05-07 22:50:10 · 190 阅读 · 0 评论