canvas教程(二) 绘制直线

分类 : 语言编程

经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况

而本次是给大家带来直线的绘制

canvas 中,基本图形有两种,一种是直线,还有一种是曲线
但是无论是直线还是曲线,我们都应该先了解 canvas 的坐标系 s

canvas 的坐标系

要绘制之前肯定要了解一下 canvas 的坐标系,我们之前肯定接触过数学坐标系:y 轴正方向是向上的

其实在前端领域里几乎所有的坐标系都是使用的 w3c 的坐标你,canvas 也是一样,w3c 的坐标系和数学坐标系的区别就在于:w3c 坐标系的 y 轴正方向是向下的

绘制直线

canvas 中绘制直线可以使用 moveTo 和 lineTo 两个方法,我们看看绘制一条直线的语法是怎么样的

context.moveTo(x1, y1); //将画笔移动至坐标(x1,y1)作为新的起点context.lineTo(x2, y2); //从起点画线到(x2,y2)并以此作为新的起点context.stroke(); //描边连线

stroke 是指描边,对应的还有 fill 填充,我们在下面的绘制中试一试便知道是什么意思了

moveTo 和 lineTo 是可以重复使用来同时绘制多条直线

所以我们可以进行绘制三角形,矩形等

描边三角形:

context.moveTo(50, 50);context.lineTo(50, 100);context.lineTo(100, 100);context.lineTo(50, 50);context.stroke();

填充矩形:

context.moveTo(50, 50);context.lineTo(50, 100);context.lineTo(150, 100);context.lineTo(150, 50);context.lineTo(50, 50);context.fill();

是吧,我们很容易就理解了其中的区别。

绘制矩形

那么在我们开发当中,矩形是非常常见的,但我们发现一条一条的直线绘制是一件很麻烦的事情,所以 canvas 也带有了绘制矩形的方法: rect(x, y, width, height)

其中 x,y 代表绘制起点 width 和 height 分别要绘制的矩形的宽和高

而在我们绘制的时候可以修改颜色即是描边颜色:strokeStyle填充颜色:fillStyle

这两个属性的取值分为三种 1.颜色值 2.渐变色 3.图案
后面两种暂且不表,颜色则支持十六进制颜色关键字(例如:red)、rgbrgba

所以绘制矩形的步骤是

context.strokeStyle = 'red'; //1. 设置描边颜色context.rect(50, 50, 100, 50); //2. 绘制矩形context.stroke(); //3. 描边

canvas 也提供了另外两种绘制矩形的方法:描边矩形和填充矩形
就是上面的 2,3 的结合
填充和描边的分别是 fill 和 stroke 那么填充矩形和描边矩形的方法就是 fillRect 和 strokeRect 了
语法均是一致的

?? strokeStyle 和 fillStyle 必须在绘制之前设置,否则无效

清除画布

有绘制矩形的方法,也有清除矩形的方法,这里的清除矩形不是指清除之前画的所有矩形,而是指在画布清除指定矩形区域
方法名字为 clearRect,属性和绘制矩形是一致的

所以我们以后也会经常用到这个方法来,用来清空整个 canvas,即 context.clearRect(0,0,canvas.width,canvas.height)

结束

本次讲了:绘制直线绘制矩形描边和填充清除矩形,大家学会了多少呢?

其实已经可以利用这些做一些好玩的事情了,比如五角星,多边形,取色板等有趣的形状,工具

好了,本次的教程就到这里结束了,下次将为大家带来曲线相关的绘制


分类: 语言编程    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程

分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 CSS基础 电脑知识

随机阅读

表单中submit和button按钮的区别!
电脑太卡想刷机怎样刷
在HTML中怎么去掉超链接的下划线?
HTML是什么?? HTML是什么?讲的通俗一点!
html下划线虚线 高分。html语言如何在文字下面插入一条虚线
方正综艺繁体下载字体后如何安装,如何下载字体并安装
方正综艺繁体免费字体下载,方正综艺繁体字体免费下载,方正综艺繁体字体下
方正中倩简体下载大全,什么方正中倩简体字体下载
方正中倩繁体(FZZQFW)字体下载,方正中倩繁体字体下载
方正中等线繁体免费字体下载,方正中等线繁体字体免费下载

最新

div css隐藏内容样式方法
OPPO Reno3 Pro远程守护怎么使用?
XP系统里让IE支持多线程下载怎么设置
qq电脑管家温度检测在哪设置的? QQ电脑管家怎么测电脑的温度
win7禁用ie浏览器方法 win7怎么把桌面的ie隐藏
WinXP笔记本声卡驱动无法成功安装的解决方法
XP⁄Win7共享⁄连接打印机设置详细 xp怎
华为笔记本蓝屏错误0xcoooo428怎么解决
企业如何部署微软Windows 8? Windows 8的开发历史
华为mate9怎样解指纹密码?

推荐阅读

c语言中break语句的作用
vscode----vue中HTML代码tab键自动补全
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
undefined是什么意思啊
前端该怎么学?推荐一个学习路线!
.Net轻松处理亿级数据--ClickHouse数据操作
DIV CSS字体(font-family)实现字体样式设置
Mysql里表示布尔型的类型是什么
sql中的modify语句,修改列属性
html5中datalist标签怎么用

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16