随笔分类 -  Canvas

canvas的width与css中的width
摘要:在css中虽然也能设置canvas的样式,但是,对于width,height这两个重要属性必须必须必须设置在标签是,不然会影响绘画时的定位,栗子:画的圆歪七扭八 阅读全文

posted @ 2022-05-07 03:13 In-6026 阅读(37) 评论(0) 推荐(0)

画布基本功能——导出图画
摘要:将canvas的图通过canvas.toDataURL(MIMEType: String)导出 <canvas id="canvas" width="200" height="200"></canvas> const canvas = document.getElementById('canvas' 阅读全文

posted @ 2022-03-15 20:50 In-6026 阅读(223) 评论(0) 推荐(0)

画布颜色控制——填充/描边/擦除/渐变色
摘要:填充: let canvas = document.getElementById('canvas') if (canvas.getContext) { //判断浏览器是否支持canvas //获得对绘图上下文的引用,平面图形传2d let context = canvas.getContext('2 阅读全文

posted @ 2022-03-15 20:49 In-6026 阅读(172) 评论(0) 推荐(0)

画布基本功能——绘制路径
摘要:在开始画路径之前必须以context.beginPath()表示要开始绘制路径,画完后调用context.stroke()把画好的渲染出来。绘制路径的方法有:(注:不做特殊说明的都是number类型) **通用: 属性 描述 context.lineWidth = 10 设置线宽度 context. 阅读全文

posted @ 2022-03-15 20:45 In-6026 阅读(93) 评论(0) 推荐(0)

画布基本功能——绘制矩形
摘要:fillRect:绘制并填充 strokeRect:绘制并描边 clearRect:擦除 都接受四个参数 (x: number, y: number, width: number, height: number) canvas的起点是左上角,用法和position: relative差不多,后来居上 阅读全文

posted @ 2022-03-15 20:44 In-6026 阅读(62) 评论(0) 推荐(0)

基本画布功能——替换文本/img
摘要:<canvas> //这是一段替代内容,如果浏览器支持canvas,就不会理这段内容,否则就会替代,这里面可以放文本或者<img />标签等 <img src="a.jpg" alt="" /> </canvas> 阅读全文

posted @ 2022-03-15 20:41 In-6026 阅读(37) 评论(0) 推荐(0)

画布基本功能——动画requestAnimationFrame
摘要:https://www.runoob.com/w3cnote/html5-canvas-intro.html ##requestAnimationFrame()创造平滑的canvas动画的关键 早期的动画通过计时器调用函数重新绘制canvas实现,但是计时器只负责在指定时间后把动画重绘任务放到队列中 阅读全文

posted @ 2022-03-15 01:28 In-6026 阅读(55) 评论(0) 推荐(0)

导航