canvas
liugang0605
前端架构,可观测工程译者,信通院可观测性专家,北航工程管理硕士毕业,专八,专注于系统性能和稳定性建设。
展开
-
动态生成条形图-canvas
按照上篇我稍微改动了一些: 给每个矩形增加了一个颜色的属性var rec = function (x, y, w, h) { this.x = x; this.y = y; this.w = w; this.h = h; this.color=this.h > 300 ? "red" : this.h > 200 ?原创 2017-08-07 16:08:26 · 1683 阅读 · 0 评论 -
popup(3)
在body中我只放了一个canvas元素定义宽高;<canvas id="cloth" width="500" height="500"></canvas>定义canvas的背景吧:canvas { background: yellow; }然后就是编写脚本了;<script>//获取元素创建画布 var ctx = document.getElem原创 2017-08-04 10:46:18 · 208 阅读 · 0 评论 -
canvas画圆
用canvas简单写几个同心圆吧; 代码如下:<!doctype html><html><head> <style> canvas { background: yellow } </style> <meta charset="utf-8"></head><body onload="draw()"><canva原创 2017-08-05 12:20:15 · 1155 阅读 · 0 评论 -
popup-canvas
之前就说要写的,今天补出来; 先看效果: 基本代码: 要实现<!doctype html><html><head> <style> canvas { background: yellow } </style> <meta charset="utf-8"></head><body onload="draw原创 2017-08-05 16:39:48 · 630 阅读 · 1 评论 -
数据展示-条形图-canvas
假设后台要求实现一个条形图,而且还是动态生成,(此处暂时不考虑用户输入数值,仅考虑数据从后台生成); 大概效果如图: 比如在500*500的框内生成;以下是基本布局,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>trialgame</title> <style>原创 2017-08-07 08:58:43 · 985 阅读 · 0 评论 -
贝塞尔曲线
http://www.cnblogs.com/wxydigua/p/4204254.html转载 2017-09-01 07:30:42 · 206 阅读 · 0 评论 -
canvas渐变
就不多介绍了,单纯为了回忆一下canvas的渐变属性的写法;绘制渐变图形效果: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><!--linearGradient--><canvas id="canvas" width="500" heig原创 2017-09-22 16:08:12 · 390 阅读 · 0 评论 -
clock-canvas
先列出效果图吧; 基本布局:html>head lang="en"> meta charset="UTF-8"> title>title> style> div { text-align: center; margin-top: 250px; } style>he原创 2017-10-23 15:43:55 · 281 阅读 · 0 评论