Canvas绘制基本线条的方式

什么是Canvas

 - Canvas，顾名思义，是一块“画布”，Canvas有着默认的宽(300px)、高(150px);

<canvas id="myCanvas" width="300" height="150"></canvas>
(默认状态下的值), 即为
<canvas id="myCanvas"></canvas>
不改变Canvas内的宽、高值，下面的值超过部分将被遮住。

实例：绘制一个黄色的矩形：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><canvas id="myCanvas">您的浏览器不支持canvas标签</canvas><script>var canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#fff000';//  样式：颜色ctx.fillRect(0,0,80,100); // （起始位置(left)）,（起始位置(top)），宽，高 ：宽为80，高100的矩形位置在离左边0,上面0,的地方  </script>
</body>
</html>

绘制基本线条

方法	描述
beginPath()	开始一个新的绘制路径
moveTo(int x,int y)	移动画笔到指定坐标点（x,y），该点为路径的起点
lineTo(int x,int y)	从当前端点到指定坐标点（x,y）添加一条直线
stroke()	沿着绘制路径的坐标点顺序绘制直线
closePath()	如果当前的绘制路径是打开的，则关闭该绘制路径
quadraticCurveTo(cx,cy,x,y)	绘制二次曲线，坐标点（cx,cy）为控制点，坐标（x,y）为终点
bezierCurveTo(cx1,cy1,cx2,cy2,end1,end2)	绘制贝塞尔曲线，坐标点（cx1,cy1）和（cx2,cy2）为控制点，坐标点（end1,end2）为终点
arc(x,y,r,sAngle,eAngle,counterclockwise)	绘制圆弧，坐标点（x,y）为圆的中心点，r是圆的半径，,sAngle是起始角，eAngle是结束角，counterclockwise是可选参数，false是顺时针，true是逆时针

绘制直线

在绘制直线的时候也需要一个起点和一个终点，绘制直线代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><canvas id="myCanvas">您的浏览器不支持canvas标签</canvas><script>var canvas=document.getElementById('myCanvas');   //获取Canvas对象var ctx=canvas.getContext('2d');   //获取上下文对象ctx.beginPath();   //开始一个新的绘制路径ctx.moveTo(10,10);   //定义直线的起点坐标为(10,10)ctx.lineTo(200,10);   //定义直线的终点坐标为(200,10)ctx.stroke();   //沿着坐标点的路径顺序绘制直线ctx.closePath();   //关闭当前的绘制路径</script>
</body>
</html>

绘制二次曲线

二次曲线由一个起点，一个终点和一个控制点决定，当控制点经过圆锥顶点时，曲线变成一个点、直线或相交直线，当控制点不经过圆锥顶点时，曲线可能是圆、椭圆、双曲线或抛物线。使用Canvasd的quadraticCurveTo函数绘制二次曲线的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><canvas id="myCanvas">您的浏览器不支持canvas标签</canvas><script>var canvas=document.getElementById('myCanvas');   if(canvas && canvas.getContext){              // 判断Canvas对象是否为空var ctx = canvas.getContext("2d");        // 获取Canvas对象上下文ctx.beginPath();                          // 开始一个新的绘制路径ctx.moveTo(100,50);                       // 定义直线的起点坐标为(100,50)ctx.quadraticCurveTo(100,15,300,30);      // 设置二次曲线坐标ctx.stroke();                             // 绘制路径}</script>
</body>
</html>

关于closePath:

在绘制直线的时候，我们最后用了closePath函数关闭当前的绘制路径，但是在绘制二次曲线的时候却没有用。这里需要提醒大家，closePath函数用于创建从当前点到开始点的路径，如果这里使用此函数，就会绘制一个封闭的二次曲线。
问：在获取Canvas对象时为什么要判断它是否为空？
答：因为有些浏览器对Canvas的支持不是很好，为了避免网页运行时出现错误，需要提前判断。

绘制贝塞尔曲线

是电脑图形中非常重要的参数曲线，广泛应用于计算机图形中为平滑曲线建立模型。贝塞尔曲线的每一个定点都有两个控制点，用于控制在该顶点两侧的曲线的弧度。
他有一个起点、一个终点、两个控制点，共四个点决定一条曲线。使用Canvas的bezierCurveTo函数可以非常方便的绘制贝塞尔曲线，绘制代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><canvas id="myCanvas">您的浏览器不支持canvas标签</canvas><script>var canvas=document.getElementById('myCanvas');   if(canvas && canvas.getContext){              // 判断Canvas对象是否为空var ctx = canvas.getContext("2d");        // 获取Canvas对象上下文ctx.beginPath();                          // 开始一个新的绘制路径ctx.moveTo(50,200);                       // 定义直线的起点坐标为(50,200)ctx.bezierCurveTo(50,100,200,100,200,150);      // 设置贝塞尔曲线坐标ctx.stroke();                             // 绘制路径}</script>
</body>
</html>

绘制圆弧
使用Canvas的arc方式绘制圆弧的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><canvas id="myCanvas">您的浏览器不支持canvas标签</canvas><script>var canvas=document.getElementById('myCanvas');   if(canvas && canvas.getContext){              // 判断Canvas对象是否为空var ctx = canvas.getContext("2d");        // 获取Canvas对象上下文ctx.beginPath();                          // 开始一个新的绘制路径ctx.arc(100,75,50,0,2*Math.PI*0.75);      // 设置圆弧坐标坐标ctx.stroke();                             // 绘制路径}</script>
</body>
</html>

Canvas绘制基本线条的方式相关推荐

canvas绘制不规则线条，类似画板的画笔，基于zrender
本文介绍绘制类似画板中画笔功能的线条 zrender实现简易画板功能可绘制大部分常用图形在文章末尾可参考多数情况下绘制线条首先想到的是用Line绘制,当然1或2像素的细线没什么问题当线条变宽就有意 ...
为什么canvas绘制的线条会模糊、有锯齿？
有如下的代码: <style type="text/css">canvas {position:absolute;height : 100%;width : 100%; ...
[七夕节]——一款基于canvas绘制五颜六色线条合成一个爱心发光动画特效
Canvas基本介绍 Canvas介绍 1.canvas是html5的一个新标签,属于h5的新特性 2.canvas标签是一个图形的容器,简单点说就是一块画布,你可以在上画矩形,圆形,三角形,折线等等 ...
在js中，使用canvas绘制渐变色线条
效果代码注:看注释 var colors = ['#6bfae1' ,'#63b9e9' ,'red' ,'yellow' ,'blue', 'green'];var ctx = canvas.g ...
h5的横线_使用HTML5 Canvas绘制直线或折线等线条的方法讲解
HTML5 Canvas基本概念讲解html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏 ...
用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法发布时间:2020-08-29 11:24:23 来源:亿速云阅读:96 作者:小新这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
绘制扇形的多种方式，包括border-radius、clip裁剪显示、canvas原点变换等方式的详细理解及demo
对clip的理解: clip是对使用了该样式的元素进行裁剪显示.使用方法是rect (top, right, bottom, left) 其中参数top代表显示的区域上边界离该元素顶部border-t ...
canvas线条背景(抽象画布可视化，利用canvas绘制多条线条，再利用多条线条同时动态发生改变，形成一幅美妙的动态图，非常惊艳！)
canvas线条背景(抽象画布可视化,利用canvas绘制多条线条,再利用多条线条同时动态发生改变,形成一幅美妙的动态图,非常惊艳!) 动态变化中的静态截图 <!doctype html> ...
小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...

Canvas绘制基本线条的方式

Canvas绘制基本线条的方式

Canvas绘制基本线条的方式相关推荐

最新文章

热门文章