![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 132 阅读 · 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 · 109 阅读 · 0 评论 -
canvas-第二天02部分
1.绘制文字 var canvas = document.getElementById("demoCanvas"); var pencil = canvas.getContext("2d"); /** * 设置文字的属性* * pencil.font = css 语法 * 注意:这里设置...原创 2018-12-28 19:47:07 · 97 阅读 · 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 · 112 阅读 · 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 · 119 阅读 · 0 评论 -
canvas-第一天04部分
1.画一个渐变的矩形 var canvas = document.getElementById("demoCanvas"); var pencil = canvas.getContext("2d");/** setLineDash(): 缓冲(断点)设置,用于产生断点效果,该方法的参数是一个数字或一段数字组成的数组* 第一个参数是第一条的长度(4)*...原创 2018-12-28 11:32:34 · 101 阅读 · 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 · 91 阅读 · 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 · 77 阅读 · 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 · 76 阅读 · 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 · 86 阅读 · 0 评论 -
canvas-第四天
1.关于 this /* ****总结:谁调用fn, this,就指向谁***** * * 四种调用模式: * 1、函数调用 == window * 2、方法调用 == 宿主 * 3、构造器 == 实例对象 * 4、上下文(间接调用) == 自由指定 ...原创 2018-12-30 17:29:01 · 122 阅读 · 0 评论