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基础 电脑知识

随机阅读

c#怎样日期转换成字符串
<body>常用的属性有哪些?
ASP.NET采集实时数据,请问后台数据库选用哪种比较合适?MYSQL
html是什么意思?
我想问一下 什么是80端口 干什么用的?
oracle数据库模糊查询匹配多个字符串
oracle sql like多个条件函数
oracle字段like多个条件
上海有什么好玩的地方?
html入门网页制作 零基础学习网页制作,从何学起

最新

零基础学习C语言,怎么入门?
C语言使用什么软件?
c语言用什么软件编写(新手c语言基础知识入门)
Oracle如何实现like多个值的查询
Oracle如何实现like多个值的查询 - 数据库
oracle 多个like条件查询
Oracle中关键字like的使用总结
oracle 中模糊查询对like的代替insrt()函数
oracle数据库模糊查询匹配多个字符串
Oracle如何实现like多个值的查询 - Oracle - 服务器

推荐阅读

vscode----vue中HTML代码tab键自动补全
html如何实现鼠标悬停显示文字,鼠标移走文字消失。
c语言中break语句的作用
C#语言之“string格式的日期时间字符串转为DateTime类型”
undefined是什么意思啊
DIV CSS字体(font-family)实现字体样式设置
AirPods怎么删除配对过的设备 airpods可以和电脑连接的
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
risk-taking中文是什么意思
C语言程序中break是什么意思?

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