canvas
关注
分享
扫一扫
sleepwalker_1992
这个作者很懒，什么都没留下…
展开
-
JavaScript实现图片文件转base64
图片文件转base64，利用canvas// 图片文件转base64，利用canvasfunction getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; ...原创 2020-02-05 22:29:44 · 757 阅读 · 0 评论 -
canvas——绘制序列帧动画
代码中用的图片：大小200*260方法一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>序列帧动画</title></head><body><div id="conta...原创 2018-06-06 21:44:23 · 6791 阅读 · 1 评论 -
canvas——绘制坐标系
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas绘制坐标系</title> </head><body> <div id="container"> <canva...原创 2018-06-06 16:21:54 · 3362 阅读 · 0 评论 -
canvas——饼状图绘制文字
重点：计算文字应放的位置坐标。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>饼状图绘制文字</title></head><body><div id="container">...原创 2018-06-05 09:32:25 · 2272 阅读 · 1 评论 -
canvas——绘制图片
绘制图片（drawImage） （重点）1、基本绘制图片的方式 context.drawImage(img,x,y); 参数说明： x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。2、 在画布上绘制图像，并规定图像的宽度和高度 context.drawImage(img,x,y,width,height); 参数说明：width 绘制图片的...原创 2018-06-05 22:17:44 · 11100 阅读 · 0 评论 -
canvas——绘制文字
1、 绘制上下文的文字属性font 设置或返回文本内容的当前字体属性 * font 属性使用的语法与 CSS font 属性相同。例如：ctx.font = "18px '微软雅黑'";textAlign 设置或返回文本内容的当前对齐方式 * start : 默认。文本在指定的位置开始。 * end : 文本在指定的位置结束。 ...原创 2018-06-04 22:34:48 · 43885 阅读 · 0 评论 -
canvas——绘制弧、圆形、饼状图
1、绘制圆形（arc)概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。 * 语法：ctx.arc(x , y, r, sAngle, eAngle, counterclockwise); * arc: 弧（度）弧形物；天穹 英 [ɑːk] 美 [ɑrk] * counter 反击，还击；反向移动，对着干；反驳，回答 ['kaʊntə] 美 ['...原创 2018-06-04 21:33:36 · 8108 阅读 · 0 评论 -
canvas——绘制矩形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>矩形</title></head><body><div id="container"> <canvas id="c...原创 2018-06-04 17:10:25 · 6223 阅读 · 0 评论 -
canvas——路径开始和闭合
* 开始路径：ctx.beginPath(); * 闭合路径：ctx.closePath(); * 解释：如果复杂路径绘制，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。 * beginPath: 核心的作用是将 不同绘制的形状进行隔离， 每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以分开进行样式设置...原创 2018-06-04 16:46:26 · 5232 阅读 · 0 评论 -
canvas——绘制表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>绘制表格</title></head><body> <div id="container"> <ca...原创 2018-06-04 15:56:20 · 10096 阅读 · 2 评论 -
canvas基本入门
canvas是HTML5提供的一种新标签<canvas></canvas> 帆布 画布canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。HTML5之前的web页面只能用...原创 2018-06-04 10:10:14 · 360 阅读 · 0 评论