canvas
会宇
坚持哦
展开
-
用 html canvas的getImageData()方法获取输入文字的xy坐标
用getImageData() 方法返回一个ImageData类, 循环类里的data数组, 其中数组的数量是canvas的宽度 * 高度 * 4 得来的乘4是因为图片是rgba颜色组成的 1代表r, 2代表g, 3代表b, 4代表透明度例如想获取canvas画图 x0 y0 的颜色就可以这样写:var imageData = ctx.getImageData(e.x, e.y, e.x, e.y);alert("rgba(" + imageData.data[0] + ", " + ima.原创 2021-02-07 22:20:49 · 1052 阅读 · 0 评论 -
html canvas 圆旋转
<html> <head> <title圆旋转</title> <style> *{ padding: 0; margin: 0; } canvas{ background-color: blac...原创 2021-02-05 19:47:18 · 658 阅读 · 0 评论 -
html canvas 水波纹
原理就是每个小圆都在自己围绕一个大圆做旋转, 只要让他们的初始角度不一样组合在一起看上去就像是在运动, 只要一直观察其中一个圆他们都在公转<!DOCTYPE html><html> <head> <title>index.html</title> </head> <body> This is my HTML page. <br> &l...原创 2021-01-27 22:33:17 · 327 阅读 · 2 评论 -
html canvas js 扇形统计
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>扇形图</title><style>canvas{ border: 1px solid #A4E2F9;}</style><script type="text/javascript"></script></head&...原创 2020-08-13 10:54:01 · 487 阅读 · 0 评论 -
html js canvas 实现 钟表
<!doctype html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style> canvas{ display: block; margin: auto; border: 1px solid #CCC; } </style>...原创 2020-08-11 13:11:20 · 370 阅读 · 2 评论