canvas
关注
分享
扫一扫
蜡笔love小新
只记录个人学习笔记
展开
-
canvas01: 体验canvas
创建一个简单的canvas案例:基本步骤： 1.在html中定义<canvas>标签 2.在标签内定义画布宽高 3.在<script>中获取canvas元素 4.获取canvas上下文，即绘制工具 5.以上步骤，我们就定义了一个canvas画布，并获取了上下文，接下来我们可以在canvas中绘制我们想要的图形了。例如绘制直线代码：...原创 2019-04-15 22:47:40 · 259 阅读 · 0 评论 -
canvas02:使用canvas绘制一条直线
在canvas01中，我们创建了一个简单的canvas案例，现在我们在canvas中绘制一条直线。步骤： 1.定义canvas工具 2.设置起始点坐标x,y （moveTo(x,y)） 3.移动到结束点x1,y1 （lineTo(x1,y1)） 4.设置直线宽度（strokeWidth = '5'可选，默认1px） 5.设置直线颜色（strokeStyle = ...原创 2019-04-15 23:04:48 · 2551 阅读 · 0 评论 -
canvas03: 绘制一个三角形与closePath()用法
步骤： 第一种： 1.定义好画布与绘制工具上下文 2.定义第一条边的起点坐标 3.移动至第一条边的终点坐标 4.第二条边起点为第一条边的终点，移动到第二条边的终点坐标 5.第三条边起点为第二条边的终点坐标，起点为第一条边的起点坐标，三条线封闭形成三角形代码：<body> <canvas id="canvas" width="4...原创 2019-04-16 22:07:32 · 450 阅读 · 0 评论 -
canvas04:填充图形与fill()用法
使用fill()方法对图形进行填充，配合fillStyle使用，设置填充的颜色代码：<body> <canvas id="canvas" width="500" height="500"></canvas></body></html><script> var canvas = document....原创 2019-04-16 22:28:54 · 2179 阅读 · 0 评论 -
canvas07:非零环绕填充规则与绘制一个镂空的正方形
1先绘制一个大的正方形2绘制一个小的正方形，位于大正方形的中部3.填充后我们会得到什么图形？我们接下来试一下：代码：<style> canvas { border: 1px #333 solid; }</style><body> <!-- 1.定义一个画板 --> <ca...原创 2019-04-23 00:06:45 · 596 阅读 · 0 评论 -
canvas05:在canvas标签中设置宽高与在style中设置宽高的区别
在html中，我们给一个元素设置宽高通常会使用css样式设置。而canvas他有自己的宽高属性，我们可以在canvas中设置宽和高，但是canvas的width与height属性与css中设置width与height有没有区别，有什么区别呢，我们可以通过代码去实现对比一下。第一种： 在canvas中设置宽高代码：<!DOCTYPE html><html lang=...原创 2019-04-18 21:41:08 · 2486 阅读 · 2 评论 -
canvas06:canvas线模糊问题
当我们在canvas中绘制一条直线，会默认线的宽度为1px,颜色为黑色。但是我们会发现线条的宽度要比1px宽，颜色也没有那么黑，更像是灰色。我们看下效果。代码：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...原创 2019-04-18 22:04:34 · 1003 阅读 · 0 评论 -
canvas08:lineCap属性与绘制线两端样式
lineCap:用于绘制线条两端的样式。属性值有“butt”、“round”、“square”。属性值 作用 butt 默认，线条的两端为平行的边缘 round 向线条的两端添加半圆形线帽 square 向线条的两端添加正方形线帽 案例： 绘制三条直线，分别使用lineCap的三个属性绘制末端，观察区别。代码：<body...原创 2019-04-23 21:43:51 · 1749 阅读 · 0 评论 -
canvas09:lineJoin属性与设置折线拐点样式
lineJoin：设置两条线相交的拐点的样式。属性值为“bevel”、“round”、“miter”。属性值 作用 bevel 创建斜角 round 创建圆角 miter 默认，尖角 案例： 绘制三条折线，并设置不同的拐点样式，比较不同。代码：<!DOCTYPE html><html lang="en">...原创 2019-04-23 22:02:15 · 1485 阅读 · 0 评论