canvas
关注
分享
扫一扫
那是遇知吧
Life is but a walking shadow
展开
-
Canvas学习Part4 - lineCap、lineJoin 、lineWidth 、miterLimit
lineCap用法：设置或返回线条末端线帽的样式。注意："round" 和 "square" 值会使线条略微变长。值 描述 butt 默认。向线条的每个末端添加平直的边缘。 round 向线条的每个末端添加圆形线帽。 square 向线条的每个末端添加正方形线帽。 lineJoin属性用法：设置或返回所创建边角的类型，当两条线交汇时。值 描述 bevel 创建斜角。 round 创建圆角。 miter ...转载 2020-09-28 17:36:39 · 451 阅读 · 0 评论 -
Canvas学习Part3 - shadowColor 、shadowBlur、shadowOffsetX、shadowOffsetY
shadowColor用法：设置或返回用于阴影的颜色。shadowBlur用法：设置或返回阴影的模糊级数。shadowOffsetX用法：设置或返回阴影与形状的水平距离。shadowOffsetY用法：设置或返回阴影与形状的垂直距离。基本用法：<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canv转载 2020-09-28 16:35:23 · 833 阅读 · 0 评论 -
Canvas学习Part2 - strokeStyle 属性
strokeStyle 属性用法：strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。基本用法<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");var ..转载 2020-09-28 16:12:57 · 2888 阅读 · 0 评论 -
Canvas学习Part1 - fillStyle、createLinearGradient() 、createPattern() 、createRadialGradient()
fillStyle 属性用法：设置或返回用于填充绘画的颜色、渐变或模式。基本用法<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext(.转载 2020-09-28 16:02:13 · 441 阅读 · 0 评论 -
大数据canvas
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...原创 2019-12-20 10:14:55 · 79 阅读 · 0 评论 -
每日一練16：canvas验证码
效果如图：css： input{ border-radius:5px; border:1px solid #fad0c4; box-shadow: 0px 2px 3px #ff9a9e; height:30px } button{ ...原创 2019-12-04 09:19:24 · 189 阅读 · 0 评论 -
每日一练14：Canvas大转盘抽奖
显示结果：指针图片：代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2019-11-30 17:22:45 · 184 阅读 · 0 评论 -
Canvas元素總結
參考：Canvas 基本用途requestAnimationFrame的使用HTML：<canvas id="tutorial" width="150" height="150"></canvas>若是沒有設定width和height屬性，畫布寬預設值為300px、高預設值為150px不支持canvas的可以使用圖片、文字說明&...原创 2019-12-20 10:15:28 · 166 阅读 · 0 评论 -
每日一练13：Canvas简易刮刮乐
显示效果如图：首先加载图片：var img = new Image(),imgs = ['p_0.jpg', 'p_1.jpg'],num = Math.floor(Math.random() * 2);mycav.style.backgroundImage = 'url(./' + imgs[num] + ')';建立一个imgs数组，然后弄个随机数，因为是两张图片所以随...原创 2019-11-27 17:05:14 · 140 阅读 · 0 评论 -
每日一练11：canvas动态绘制图形
呈现结果：1：储存改变后的值：shapeval = { shape: pickShape.value, color: pickColor.value, strokefill: pickStroke.value, line: pickLine.value, clear: pickClear.value};2：开始值dis = {...原创 2019-11-23 15:23:53 · 230 阅读 · 0 评论 -
每日一练10：canvas如何拖动内置图片
结果如下：图片在此：HTML：<canvas width="500" height="500" style="border:4px solid #F60" id="mycas"></canvas>JS：<!DOCTYPE html><html lang="en"><head> <met...原创 2019-11-22 15:13:34 · 248 阅读 · 0 评论 -
每日一练07：canvas时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-11-19 17:31:49 · 186 阅读 · 0 评论