canvas
关注
分享
扫一扫
文章平均质量分 88
hahalang-
前端攻城狮一枚
展开
-
Canvas绘制时钟
Canvas绘制时钟步骤如下：首先绘制时钟的背景，包括小时数已经代表分钟的点。 <style type="text/css"> div { text-align: center; margin-top: 150px; } #can { border: 1px solid black; } </style...原创 2018-11-20 21:49:16 · 205 阅读 · 0 评论 -
4. Canvas旋转与变形
一.旋转与变形1.变形方法：变形方法中的旋转/移动相关方法 方法 说明 setTransform(m11,m12,m21,m22,dx,dy) 变形矩阵的指定（清空先前的指定） transform(m11,m12,m21,m22,dx,dy) 变形矩阵的指定（可重复指定） rotate(angle) 旋转 scale(x,y) ...原创 2018-11-17 16:40:21 · 1097 阅读 · 0 评论 -
3. Canvas绘制数据图表
一. Canvas绘制数据图表1.绘制方格图：方格图是为了最终绘制折线数据图表做准备的。绘制方格图只需要在Canvas上绘制一系列的横线与竖线。 <canvas id="cas" width="300" height="300"></canvas> <script type="text/javascript"> //获取上下文原创 2018-11-04 18:17:04 · 1320 阅读 · 0 评论 -
2. canvas绘制渐变效果、绘制图像
一.绘制渐变效果线性渐变语法： //创建CanvasGradient对象 var g = context.createLinearGradient(x1,y1,x2,y2); //追加渐变颜色 g.addColorStop(颜色开始的相对位置，颜色);绘制线性渐变的实例： <canvas id="cas" width="300" height="300"&...原创 2018-11-04 09:54:37 · 982 阅读 · 0 评论 -
1. Canvas绘制基础图形
Canvas是在web画面中绘制位图的技术。步骤：1.取得Canvas对象。（相当于画布）2.从Canvas对象中获取绘图用的上下文。（相当于绘画用的笔）3.使用上下文中的方法和属性进行绘图。1.简单例子： <style type="text/css"> canvas { width: 300px; height: 300px; } &l...原创 2018-11-03 15:19:50 · 1155 阅读 · 0 评论