菲洛嘉青春动能素135HA FILLMED® NCTF 135HA LED指示灯的常见故障分析 智微智能 Elkhartlake K075终端,零售产业新选择 天空蓝拓客管理系统详细介绍版 muso公链项目 天使计划 是什么?[秘] 独家揭秘最前沿的家装“黑科技”——掌赋 天博体育欧洲杯特辑,东道主法兰西的失意2016 亚马逊的送货侦察员 学习听起来像挡泥板 Google Comics Factory使ML变得容易 笑着说-男性或女性 Amazon Rekognition中更好的人脸检测 关于Spaun的真相-大脑模拟 两个聊天机器人彼此聊天-有趣又怪异 GANPaint:将AI用于艺术 WCF和WF给予社区 从耳朵到脸 所有神经网络的深层缺陷 蠕虫在尾巴上平衡杆子 Kickstarter上的OpenCV AI套件 TensorFlow-Google的开源AI和计算引擎 众包取代新闻工作者 Google的DeepMind学会玩街机游戏 哑机器人V智能机器人 .NET与.NET 5融为一体 Google的深度学习-语音识别 LInQer将.NET LINQ移植到Javascript 机器人TED演讲-新的图灵测试? GAN的发明者加入苹果 您的智能手机会监视您键入的内容 人工智能帮助改善国际象棋 Zalando Flair NLP库已更新 TensorFlow 1.5包含移动版本 AlphaGo输了一场比赛-比分3-1 虚拟机器学习峰会 Microsoft开源AI调试工具 SharePoint走向移动 F#4.0发出文化变革的信号 克里斯蒂拍卖AI艺术品 人工智能如何区分 Facebook在蒙特利尔的新AI实验室 Mozilla想要您的声音 微软使用极深的神经网络赢得ImageNet 建立AI合作伙伴关系 .NET Core 3-Microsoft几乎回到了起点 神经网络-更好的销售商? Google使用AI查找您的住所 虹膜-适用于Android的Siri证明苹果没有优势 TensorFlow 2提供更快的模型训练 深度学习研究人员将为Google工作
您的位置:首页 >前端 >

Canvas基础教程(章节2)

  发现一个好玩小技巧,如果浏览器不支持 Canvas 画布怎么办? 在这里插入图片描述 别这样写,太 low 了 试试这个 👇 在这里插入图片描述 哇哦,我学会了。来吧!开始今天的学习内容

渲染上下文

  < canvas>会创建一个固定大小的画布,会公开一个或多个 渲染上下文(画笔),使用 渲染上下文来绘制和处理要展示的内容。   我们重点研究 2D渲染上下文。其他的上下文我们暂不研究,比如, WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。 //获得 2d 上下文对象 var ctx = canvas.getContext (‘2d’); 检测支持性 if(canvas.getContext){   var ctx = canvas.getContext(‘2d’);   // drawing code here } else{   // canvas-unsupported code here }

基本格式:

<html><head><title>Canvas 基础</title><style>canvas{border: 1px solid black;}</style></head><body><canvas id="canvas" width="300" height="300"></canvas></body><script>function draw(){var canvas = document.getElementById('canvas');if(!canvas.getContext) return;var ctx =canvas.getContext("2d");//开始代码draw();}draw();</script></html>

先来复习一下上一章的内容:

  如下图所示,canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas 元素中的一像素。栅格的起点为左上角(坐标为(0,0))。所有元素的位置都相对于原点来定位。   所以图中蓝色方形左上角的坐标为距离左边(X轴)x像素距离上边(Y轴)y像素(坐标为(x,y))。后面我们会涉及到坐标原点的平 移、网格的旋转以及缩放等。

在这里插入图片描述 绘制一个简单的矩形。 canvast 提供了三种方法绘制矩形:

1.fillRect(x, y, width, height):绘制一个填充的矩形2.strokeRect(x, y, width, height):绘制一个矩形的边框 3.clearRect(x, y, widh, height):清除指定的矩形区域,然后这块区域会变的完全透明。

这3个方法具有相同的参数。 x, y:指的是矩形的左上角的坐标。(相对于canvas的坐标原点) width, height:指的是绘制的矩形的宽和高。

<body><canvas id="canvas" width="300" height="300"></canvas></body><script>!function(){var canvas = document.getElementById('canvas');if(!canvas.getContext) return;var ctx =canvas.getContext("2d");//开始代码draw();ctx.fillRect(10,10,100,50);//绘制矩形,填充的默认颜色为黑色ctx.strokeRect(10,70,100,50);//绘制矩形边框}()</script></html>

在这里插入图片描述 再添加上这一句:ctx.clearRect(15,15,50,25); 在这里插入图片描述 接下来绘制路径   图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。每一个路径,甚至一个子路径,都是闭合的。   1.创建路径起始点   2.调用绘制方法去绘制出路径   3.把路径封闭   4.一旦路径生成,通过描边或填充路径区域来渲染图形。 会用到以下方法: 1.beginPath() 新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径。 2.moveTo(x, y) 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。 3.closePath() 闭合路径之后,图形绘制命令又重新指向到上下文中 4.stroke() 通过线条来绘制图形轮廓 5.fill() 通过填充路径的内容区域生成实心的图形

绘制线段:

<body><canvas id="canvas" width="300" height="300"></canvas></body><script>!function(){var canvas = document.getElementById('canvas');if(!canvas.getContext) return;var ctx =canvas.getContext("2d");//开始代码draw();ctx.beginPath();//新建一条pathctx.moveTo(50,50);//把画笔移动到指定的坐标ctx.lineTo(200,50);//绘制一条从当前位置到指定坐标(200, 50)的直线.//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合,则什么都不做ctx.closePath();ctx.stroke();//绘制路径。}()</script></html>

绘制三角形边框:

<body><canvas id="canvas" width="300" height="300"></canvas></body><script>!function(){var canvas = document.getElementById('canvas');if(!canvas.getContext) return;var ctx =canvas.getContext("2d");//开始代码draw();ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(200,50); ctx.lineTo(200,200);ctx.closePath();//虽然我们只绘制了两条线段,但是closePath会closePath,仍然是一个3角形ctx.stroke();//描边。stroke不会自动closePath()}()</script></html>

填充三角形:

<body><canvas id="canvas" width="300" height="300"></canvas></body><script>!function(){var canvas = document.getElementById('canvas');if(!canvas.getContext) return;var ctx =canvas.getContext("2d");//开始代码draw();ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(200,50); ctx.lineTo(200,200);ctx.fill();//填充闭合区域。如果path没有闭合,则fill()会自动闭合路径。}()</script></html>

  卧槽!我电脑一直漏电,我不知道什么原因导致的,我现在手臂麻麻的。我再写两句,如果还是麻麻的我就先不写了,我挺怕死的。

绘制圆弧 目前有两种方法可以绘制圆弧: 1.arc(x, y, r, startAngle, endAngle, anticlockwise) 以(x, y)为圆心,以r为半径,从 startAngle弧度开始到 endAngle弧度结束。anticlosewise是布尔值,true表示逆时针,false表示顺时针。(默认是顺时针) 注意: 这里的度数都是弧度。 0弧度是指的x轴正方形 radians=(Math.PI/180)*degrees //角度转换成弧度· 1 2.arcTo(x1, y1, x2, y2, radius) 根据给定的控制点和半径画一段圆弧,最后再以直线连接两个控制点。 圆弧案例:

<body><canvas id="canvas" width="300" height="300"></canvas></body><script>!function(){var canvas = document.getElementById('canvas');if(!canvas.getContext) return;var ctx =canvas.getContext("2d");//开始代码draw();ctx.beginPath();ctx.arc(50,50,40,0, Math.PI/2,false); ctx.stroke();}()</script></html>

在这里插入图片描述 再多画几个

<body><canvas id="canvas" width="300" height="300"></canvas></body><script>!function(){var canvas = document.getElementById('canvas');if(!canvas.getContext) return;var ctx =canvas.getContext("2d");//开始代码draw();ctx.beginPath();ctx.arc(50,50,40,0, Math.PI/2,false); ctx.stroke();ctx.beginPath();ctx.arc(150,50,40,0,-Math.PI/2,true); ctx.closePath();ctx.stroke(); ctx.beginPath();ctx.arc(50,150,40,-Math.PI/2, Math.PI/2,false); ctx.fill();ctx.beginPath(); ctx.arc(150,150,40,0, Math.PI,false); ctx.fill();}()</script></html>

在这里插入图片描述 再来一个:

<body><canvas id="canvas" width="300" height="300"></canvas></body><script>!function(){var canvas = document.getElementById('canvas');if(!canvas.getContext) return;var ctx =canvas.getContext("2d");//开始代码draw();ctx.beginPath(); ctx.moveTo(50,50);//参数1、2:控制点1坐标参数3、4:控制点2坐标参数5:圆弧半径ctx.arcTo(200,50,200,200,100);ctx.lineTo(200,200);ctx.stroke(); ctx.beginPath(); ctx.rect(50,50,10,10); ctx.rect(200,50,10,10);ctx.rect(200,200,10,10);ctx.fill();}()</script></html>

在这里插入图片描述 arcTo方法的说明:   这个方法可以这样理解。绘制的弧形是由两条切线所决定。   第 1 条切线:起始点和控制点1决定的直线。   第 2 条切线:控制点1 和控制点2决定的直线。   其实绘制的圆弧就是与这两条直线相切的圆弧。

糟了!手臂麻了,下节讲绘制贝赛尔曲线,读完下一章,你就能绘制下面这幅图:👇

在这里插入图片描述   本期的 Canvas 教程到这里就告一段落了,这门技术在以后的开发及装 X 中都将大放异彩,勤学苦练使我们熟能生巧,关注一波吧老铁在这里插入图片描述最后送大家三个高级又简单的Canvas 动画,既能练习又能装 X,我是 “ 我不是费圆 ”,一个每天忙到深夜码字的人,我从不轻言放弃,从不吝啬自己的赞美之词。如果你在 canvas 上有着更高的造诣,我希望能得到你的指教。反之,希望你能与我携手并进。

推荐阅读: 线条动画 线条花环 怦然心动

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。