Canvas
关注
分享
扫一扫
yi-giao-wo-li-giao
老实银，舔狗一只，欢迎大家打我
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
canvas初体验
1.对canvas的简单介绍： canvas是HTML5新增的组件，他就像是一块画布， 可以用js在上面绘制各种图表，动画等。 2.定义一个canvas标签（如果浏览器不支持canvas标签显示p标签中的文字） <canvas id="demoCanvas" width="500" height="500" style="border:1px solid #000;"> ...原创 2018-12-27 15:41:51 · 184 阅读 · 0 评论 -
canvas-第三天
1.绘制图像 var canvas = document.getElementById("demoCanvas"); var pencil = canvas.getContext("2d"); var img = document.querySelector('img'); /* * pencil.drawI...原创 2018-12-29 16:43:43 · 154 阅读 · 0 评论 -
canvas-第二天02部分
1.绘制文字 var canvas = document.getElementById("demoCanvas"); var pencil = canvas.getContext("2d"); /** * 设置文字的属性* * pencil.font = css 语法 * 注意：这里设置...原创 2018-12-28 19:47:07 · 154 阅读 · 0 评论 -
canvas-第二天01部分
1.饼图 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>原创 2018-12-28 17:24:30 · 172 阅读 · 0 评论 -
canvas-第二天
1.对象版折线图 line.js源码： /** * Created by 铁索横江 on 2018/12/28. */ /** 参数说明 * constructor{ line } 折线图构造函数 * param { ctx: Context } 绘图环境 * param { data: Array } 绘制折线图所需要的数据 * param { padding : obj...原创 2018-12-28 17:28:59 · 153 阅读 · 0 评论 -
canvas-第一天04部分
1.画一个渐变的矩形 var canvas = document.getElementById("demoCanvas"); var pencil = canvas.getContext("2d"); /* * setLineDash(): 缓冲（断点）设置，用于产生断点效果，该方法的参数是一个数字或一段数字组成的数组 * 第一个参数是第一条的长度（4） *...原创 2018-12-28 11:32:34 · 135 阅读 · 0 评论 -
canvas-第一天03部分
1.内置画矩形的API var canvas = document.getElementById("demoCanvas"); var pencil = canvas.getContext("2d"); /* * 画一个矩形路径： * pencil.rect(起点x轴坐标，起点y轴坐标，宽，高 ); ...原创 2018-12-28 09:18:38 · 125 阅读 · 0 评论 -
canvas-第一天02部分
1.填充 var canvas = document.getElementById("demoCanvas"); var pencil = canvas.getContext("2d"); function drawRect(startX, startY, width, height, lineWidth, strokeStyle, fil...原创 2018-12-27 21:17:22 · 119 阅读 · 0 评论 -
canvas-第一天01部分
1.封装一个绘制矩形的函数 var canvas = document.getElementById("demoCanvas"); var pencil = canvas.getContext("2d"); /** * 参数说明： * 1.startX: 开始时x的位置 * 2.start...原创 2018-12-27 20:30:13 · 136 阅读 · 0 评论 -
canvas-第一天
回顾一下绘图步骤： 1.获取canvas 对象 2.调用getContext（‘2d’） 3.基本的绘图命令： // 画一个矩形 pencil.fillStyle = "#ff0000"; pencil.fillRect(0, 0, 100, 100); // 画一条线 pencil.moveTo(120, 0); //设置开始路径 pencil.l...原创 2018-12-27 20:01:47 · 123 阅读 · 0 评论 -
canvas-第四天
1.关于 this /* ****总结：谁调用fn， this，就指向谁***** * * 四种调用模式： * 1、函数调用 == window * 2、方法调用 == 宿主 * 3、构造器 == 实例对象 * 4、上下文（间接调用） == 自由指定 ...原创 2018-12-30 17:29:01 · 174 阅读 · 0 评论