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 · 353 阅读 · 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 · 386 阅读 · 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 · 195 阅读 · 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 · 296 阅读 · 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 · 158 阅读 · 0 评论