Canvas
关注
分享
扫一扫
LJ·START
这个作者很懒，什么都没留下…
展开
-
Canvas-绘制动态笑脸
Canvas：需求：绘制动态笑脸<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0".原创 2021-03-29 16:42:48 · 615 阅读 · 1 评论 -
Canvas-绘图-路径-使用路径创建可以动态前进的圆环进度条
Canvas:需求：使用路径创建可以动态前进的圆环进度条<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimu.原创 2021-03-22 17:32:19 · 155 阅读 · 0 评论 -
Canvas-绘图-路径
路径：绘制不规则图形（复杂）path：由多个坐标点组成任意图形，图形本身不可见，可以描边或者填充ctx.beginPath();//开始一条新路径(上一条路径结束)ctx.moveTo(x,y);//移动到指定点(x,y)ctx.lineTo(x,y);//从当前点到指定点绘制一条直线(x,y)ctx.stroke();//描边ctx.fill();//填充ctx.closePath();//闭合一条路径(结束点到开始点画一条直线)ctx.arc(cx,cy,r,start.原创 2021-03-22 16:10:58 · 271 阅读 · 0 评论 -
Canvas-绘图-文本
ctx.strokeText(str,x,y);//绘制描边文字(空心)ctx.fillText(str,x,y);//绘制填充文字(实心)str:绘制文本x,y:字符串左上角位置(以文本基线为准)ctx.font="19px SimHei";//文本大小/字体样式ctx.textBaseline="top"//调整文本基线[top/alphabetic/bottom]<!doctype html><html lang="en"><head.原创 2021-03-22 15:01:49 · 136 阅读 · 0 评论 -
Canvas(在画布上绘制分公司销售统计图(2))
Canvas:需求：在画布上绘制分公司销售统计图(2)<style> body{ text-align:center; } canvas{ background-color:#ccc; }</style><body> <canvas id="canvas" width="500" height="400"></canvas></body>..原创 2021-03-22 14:09:44 · 161 阅读 · 0 评论 -
Canvas(在画布上绘制分公司销售统计图(1))
Canvas：需求：在画布上绘制分公司销售统计图<style> body{ text-align:center; } canvas{ background-color:#ccc; }</style><body> <canvas id="canvas" width="500" height="400"></canvas></body&g..原创 2021-03-20 17:14:44 · 204 阅读 · 0 评论 -
Canvas(在画布上绘制左右移动实心矩形)
Canvas：需求：在画布上绘制左右移动实心矩形<style> body{ text-align:center; } canvas{ background-color:#ccc; }</style><body> <canvas id="canvas" width="500" height="400"></canvas></body>&.原创 2021-03-19 20:14:58 · 979 阅读 · 0 评论 -
Canvas制作(在画布四个角与中间位置画五个100*80，实心矩形要求颜色不同)
Canvas制作:需求:在画布四个角与中间位置画五个100*80的矩形，实心矩形要求颜色不同<style> body{ text-align:center; } canvas{ background-color:"#ccc"; }</style><body> <h1>Canvas矩形</h1> <canvas id="canvas.原创 2021-03-19 18:37:10 · 446 阅读 · 0 评论 -
Canvas基础使用
一.什么是Canvas？1.HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.2.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。3.你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。二.Canvas基础使用：<style> body{ text-align: center; } canvas{原创 2021-03-19 18:02:36 · 126 阅读 · 0 评论