Canvas—从零开始手把手教会
文章目录
- 开始前的准备
- 学习如何使用画笔
- 开始绘画线段
- 绘画多条线段
- 矩形的绘画
- 给矩形上色
- 封装绘制方法
- 使用rect()方法绘制矩形
- 总结
开始前的准备
在Html上添加一个画布,给上宽高
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas——从线段开始学会</title>
</head><body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas>
</body> </html>
运行结果：
学习如何使用画笔
1.移动画笔 moveTo(x, y）
这句代码的意思是 移动画笔至(x, y)这个点（单位是px） 。记住，这里是以 canvas 画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。
2.笔画停点 lineTo(x, y)
这句的意思是从 上一笔的停止点 绘制到(x,y)这里。不过要清楚，这里的moveTo()，lineTo()都只是状态而已，是我准备要画，还没有开始画，就像是大脑已经想象出来要怎么做了，但是手还没有行动。
3.选择画笔
设置一下画笔的颜色和粗细。
context.lineWidth = 5，这句话的意思是设置画笔(线条)的粗细为 5 px。
context.strokeStyle = “pink”，这句话的意思是设置画笔(线条)的颜色为玫红色。
4.确定绘制
确定绘制只有两种方法，fill()和stroke()，前者是指填充，后者是指描边。因为我们只是绘制线条，所以只要描边就可以了。调用代码 context.stroke() 即可。
开始绘画线段
准备工作完毕了，现在我们开始来绘画第一条线段吧
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas——从线段开始学会</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");context.moveTo(100,100);context.lineTo(700,500);context.lineWidth = 5;context.strokeStyle = "pink";context.stroke();}</script>
</body>
</html>
演示图：
到这里你已经具备基本的绘画手段了，接下来可以尝试进一步的学习了。
绘画多条线段
beginPath()
为了让绘制方法不重复绘制，我们可以在每次绘制之前加上 beginPath()，代表下次绘制的起始之处为 beginPath() 之后的代码。我们在三次绘制之前分别加上context.beginPath()；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");context.beginPath();context.moveTo(100,100);context.lineTo(300,300);context.lineTo(100,500);context.lineWidth = 5;context.strokeStyle = "red";context.stroke();context.beginPath();context.moveTo(300,100);context.lineTo(500,300);context.lineTo(300,500);context.lineWidth = 5;context.strokeStyle = "blue";context.stroke();context.beginPath();context.moveTo(500,100);context.lineTo(700,300);context.lineTo(500,500);context.lineWidth = 5;context.strokeStyle = "black";context.stroke();}
</script>
</body>
</html>
演示图：
有兴趣的小伙伴可以去掉context.beginPath看一看会发生什么~
矩形的绘画
closePath()
绘制最后一笔使图像闭合
接下来我们开始利用上面所学的知识来绘画一个矩形
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");context.beginPath();context.moveTo(150,50);context.lineTo(650,50);context.lineTo(650,550);context.lineTo(150,550);context.closePath();//绘制最后一笔使图像闭合context.lineWidth = 5;context.strokeStyle = "black";context.stroke();}</script>
</body>
</html>
演示图：
给矩形上色
图形描边 fillStyle 用fillStyle属性选择要填充的颜色，然后使用 fill 对图形进行颜色填充
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");context.beginPath();context.moveTo(150,50);context.lineTo(650,50);context.lineTo(650,550);context.lineTo(150,550);context.closePath();//绘制最后一笔使图像闭合context.fillStyle = "lightblue"; context.lineWidth = 5;context.strokeStyle = "black";context.fill();//颜色填充context.stroke();}</script>
</body>
</html>
封装绘制方法
每次画个矩形都要自己去画四条线段的话，显得既简单又麻烦。接下来我们自己封装一个函数，让函数替我们去完成绘画。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");drawRect(context, 150, 50, 500, 500, 'lightblue', 5, 'black')drawRect(context, 50, 25, 50, 25, 'pink', 1 , 'black' )drawRect(context, 700, 25, 50, 25, 'orange', 1 , 'black' )}function drawRect(ctx, x, y, width, height, fillColor, borderWidth, borderColor){ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x + width, y);ctx.lineTo(x + width, y + height);ctx.lineTo(x, y + height);ctx.lineTo(x, y);ctx.closePath();ctx.lineWidth = borderWidth;ctx.strokeStyle = borderColor;ctx.fillStyle = fillColor;ctx.fill();ctx.stroke();}</script>
</body>
</html>
演示图：
使用rect()方法绘制矩形
rect(x,y,width,height)
由于矩形比较常用， Canvas API已经帮我们封装好了相关的方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");context.rect(150, 50, 500, 500)context.lineWidth = 5;context.strokeStyle = 'black';context.fillStyle = 'lightblue';context.fill()context.stroke()}</script>
</body>
</html>
演示图：
总结
ctx.beginPath()
使绘制方法不重复绘制
ctx.closePath()
绘制最后一笔使图像闭合
ctx.moveTo()
移动画笔至(x, y)这个点（单位是px）
ctx.lineTo()
上一笔的停止点 绘制到(x,y)
ctx.lineWidth()
画笔的边框
ctx.storkeStyle()
设置画笔的颜色
ctx.storke()
填充画笔颜色
ctx.fillStyle()
设置图形颜色
ctx.fill()
填充图形颜色
ctx.rect()
绘画矩形API
Canvas—从零开始手把手教会相关推荐
- 【linux】linux系统配置静态IP地址（超详细，手把手教会）
目录 1 引 言 2 科 普 3 详细教程 3.1 步骤说明 3.2 demo案例 3.3 操作步骤 4 参考文献 1 引 言 在使用Linux系统的过程中,你是否有遇到过需要配置固定IP的 ...
- [摄影基本学习]-01-认识相机(从零开始手把手教你学摄影)
内容主要参照b站<从零开始手把手教你学摄影,20节课带你从小白到大师 | 摄影前期拍摄入门 >,宝藏up主推荐: 熊熊Bearie 链接: https://www.bilibili.com ...
- 手把手教会搭建网站详细全过程（从域名到网站部署）
手把手教会搭建网站详细全过程(从域名到网站部署) 准备域名 解析域名 部署云服务器 登录宝塔界面 添加站点 上传WordPress包 WordPress编辑网站 域名备案 过年在家,闲的没有什么事做, ...
- 手把手教会你使用Arcgis画流场图
手把手教会你使用Arcgis画流场图 手把手教会你使用Arcgis画流场图 我以前一直都是用MATLAB绘制流场图的,但是工作原因让我不得不使用Arcgis画流场图.在网上找到了一些教程,但是感觉讲得 ...
- PHP错题本功能实现,收藏| 最高效的＂错题本＂制作攻略！手把手教会你！
原标题:收藏| 最高效的＂错题本＂制作攻略!手把手教会你! "错题本",也叫"摘错本""纠错本""改错本",是学生把自己 ...
- pdf转换工具怎么用？手把手教会你~
相信许多小伙伴在办公或者学习的时候,都会遇到一个问题,那就是需要将PDF进行格式的转换,这样才方便后续的使用.在我们搜索如何进行pdf转换的时候,常常能够看到一些pdf的转换工具.那么pdf转换工具怎 ...
- [摄影基本学习]-02-器材了解(从零开始手把手教你学摄影)
内容主要参照b站<从零开始手把手教你学摄影,20节课带你从小白到大师 | 摄影前期拍摄入门 >,宝藏up主推荐:熊熊Bearie 链接:https://www.bilibili.com/v ...
- iPhone夜间模式怎么打开，图文教学，手把手教会你
很多手机都拥有夜间模式,用来在黑暗的环境下,减少手机亮度对眼睛的刺激.iPhone也拥有夜间模式,很多小伙伴还不知道iPhone夜间模式怎么打开.别担心,今天小编以图文教学的方式,手把手教会你! iP ...
- python图片修改过、有原图、怎么得到改动的地方_微信发照片原图会泄露行踪？手把手教会你如何用 Python 通过图片获取用户信息！...
原标题:微信发照片原图会泄露行踪?手把手教会你如何用 Python 通过图片获取用户信息! 前言 有媒体曝出,微信发原图或存在泄露位置信息的风险. 对此,腾讯微信团队微博 12 月 1 日发布声明称, ...
最新文章
- TensorFlow+TVM优化NMT神经机器翻译
- 【前端词典】如何向老板解释反向代理
- gem ransack(4000✨) 简单介绍
- datagrip导入csv数据配合ajax+mysql+Flask实验
- 根据一级分类查询所有子级分类
- 为什么 HTTP3.0 使用 UDP 协议？
- .NET 5.0 Preview 2发布解析
- 学python分析双色球_我通过使用Python分析了80多个工作拒绝而学到的东西
- 不插网线 开机速度加快
- PBS 作业调度应用
- 使用for循环打印出大写字母的ASCII码对照表（c语言实现）
- win10系统问题记录（一）：解决D/E盘根目录出现的msdia80.dll文件
- 信创办公--基于WPS的Word最佳实践系列（利用项目符号及编号条理化文本）
- React+TS学习和使用（三）：React Redux和项目的路由配置
- C语言及实验作业,C语言作业及参考答案
- 【Spring Boot】使用JDBC 获取相关的数据
- 双足机器人的稳定性判据_双足机器人稳定性判据研究
- 三星会在泰泽大会上展示meego系统的新机么？
- 微信小程序——video视频全屏展示
- 不用u盘如何在小米电视上安装电视直播软件