03 2020 档案

canvas的学习笔记 10 文本
摘要：canvas提供两种方法来渲染文本 1、fillText（text,x,y[,maxWidth]）在指定的（x,y）位置填充指定文本，绘制的最大宽度是可选的 2、strokeText(text,x,y[,maxWidth])在制定的（x,y）位置绘制文本边框，绘制的最大宽度是可选的 3、font=v 阅读全文
posted @ 2020-03-27 16:59 小小小~ 阅读(152) 评论(0) 推荐(0)
canvas的学习笔记 9 虚线
摘要：知识点：用setLineDash方法和lineDashOffset属性来制定虚线样式，setLineDash方式接受一个数组，来指定线段与间隙的交替，lineDashOffset属性设置其实偏移量。 <!DOCTYPE html><html> <head> <meta charset="utf-8" 阅读全文
posted @ 2020-03-27 16:26 小小小~ 阅读(363) 评论(0) 推荐(0)
canvas的学习笔记 8 lineJoin
摘要：知识点：lineJoin=type 同一个path内，设定线条与线条间接合处的样式。共有3个值 round、bevel、miter 1、round通过填充一个额外，圆心在相连部分末端的扇形，绘制拐角的形状，圆角的半径是线段的宽度 2、bevel在相连部分的末端填充一个额外的以三角形为底的区域。每个部 阅读全文
posted @ 2020-03-27 15:11 小小小~ 阅读(253) 评论(0) 推荐(0)
canvas的学习笔记 7 lineCap
摘要：知识点：lineCap=type 共有三个值 1、butt：线段末端以方形结束 2、round：线段末端以圆形结束 3、square:线段末端以方形结束，但是增加一个宽度和线段相同，高度是线段厚度一半的矩形区域 具体demo <!DOCTYPE html><html> <head> <meta ch 阅读全文
posted @ 2020-03-27 14:38 小小小~ 阅读(273) 评论(0) 推荐(0)
canvas的学习笔记 6 linewidth
摘要：知识点：ineWidth线宽.默认为1,起始点和终点的连线为中心,上下各占线宽的一半 具体demo <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> canvas{ border:1px solid 阅读全文
posted @ 2020-03-27 14:30 小小小~ 阅读(324) 评论(0) 推荐(0)
canvas学习笔记5 绘制圆弧2
摘要：这个方法可以这样理解。绘制的弧形是由两条切线所决定。 第 1 条切线：起始点和控制点1决定的直线。 第 2 条切线：控制点1 和控制点2决定的直线。 ​其实绘制的圆弧就是与这两条直线相切的圆弧 <!DOCTYPE html><html> <head> <meta charset="utf-8"> < 阅读全文
posted @ 2020-03-26 16:44 小小小~ 阅读(156) 评论(0) 推荐(0)
canvas学习笔记5 绘制圆弧
摘要：绘制圆弧 知识点：arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时 阅读全文
posted @ 2020-03-25 17:24 小小小~ 阅读(364) 评论(0) 推荐(0)
canvas学习笔记4 绘制三角形
摘要：绘制三角形 知识点：closePath();关闭路径， stroke() stroke不会自动closePath() fill()表示填充实心的三角形,如果没有进行路径闭合,则fill会自动进行闭合 具体代码 <!DOCTYPE html><html> <head> <meta charset="u 阅读全文
posted @ 2020-03-23 16:03 小小小~ 阅读(478) 评论(0) 推荐(0)
canvas学习笔记3 绘制直线
摘要：绘制路径 知识点：beginPath()新建path路径 moveTo() 把画笔移动到指定的坐标（路径的起点） lineTo() 绘制一条从当前位置指定坐标（200,50）的直线（路径的终点） closePath() 闭合路径，会出现一条从当前点到Path起始点的直线，如果当前点与起始点重合，则什 阅读全文
posted @ 2020-03-23 15:21 小小小~ 阅读(188) 评论(0) 推荐(0)
canvas学习笔记2
摘要：创建一个画布，并在画布上面创建2个矩形 知识点：fillRect是创建实心的矩形样式可以用过fillStyle进行设置 strokeRect是创建实心的矩形样式可以用过strokeStyle进行设置 clearRect是清除指定的矩形区域，然后这块区域会变的完全透明。 其中里面的参数（0,0,100 阅读全文
posted @ 2020-03-23 12:17 小小小~ 阅读(143) 评论(0) 推荐(0)
canvas的学习笔记1
摘要：<canvas>是html5中的中新增的，一个可以使用脚本（JavaScript）在其中绘制图像dehtml元素，他可以用来绘制照片集或者制作简单的动画。 <canvas>标签必须要有闭合的标签</canvas> canvas的默认的宽度为300，高度为150，单位为px，颜色为黑色，默认没有边框和 阅读全文
posted @ 2020-03-23 12:12 小小小~ 阅读(127) 评论(0) 推荐(0)