canvas 圆角矩形填充_一篇文章让你学会你最“害怕”的Canvas，太有意思了

最新推荐文章于 2024-08-15 04:23:20 发布

李维伊

最新推荐文章于 2024-08-15 04:23:20 发布

阅读量692

点赞数

文章标签： canvas 圆角矩形填充

本文链接：https://blog.csdn.net/weixin_29065959/article/details/112268524

版权

本文详细介绍了HTML5的Canvas画布基础，包括如何绘制圆角矩形、线条、曲线，设置样式和颜色，以及实现动画。通过实例展示了beginPath、lineTo、arc、quadraticCurveTo等API的用法，帮助读者掌握Canvas图形绘制技巧。

摘要由CSDN通过智能技术生成

Canvas画布
基本用法

<canvas id='canvas' width="150" height="150"></canvas>

<canvas>看起来跟img标签有点像，唯一不同的是它没有src属性和alt属性。实际上，canvas标签只有两个属性:width和height。
如果没有设置宽度和高度，默认的canvas会初始化width：300px,height:150px

渲染上下文对象

canvas标签创造了一个固定大小的画布，它有一个或者多个渲染上下文对象，用它可以绘制和处理要展示的内容。接下来我们把注意力放在2D渲染上下文中。
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。canvas元素有一个叫做 getContext()的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。

var canvas = document.getElementById('myCanvas');//获取绘画上下文对象
var ctx = canvas.getContext('2d');

打印结果：

绘制形状

在这里你将学会如何绘制矩形、三角形、直线、圆弧和曲线。如果想绘制比较复杂的图形，我们需要掌握路径。

栅格(了解)

绘制矩形常用API

绘制一个填充的矩形

fillRect(x,y,width,height);

绘制一个矩形的边框

strokeRect(x, y, width, height)

清除指定矩形区域，让清除部分完全透明。

 clearRect(x, y, width, height)

上面提供的方法之中每个都包含了相同的参数。x和y指定了canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。width和height设置矩形的尺寸。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <canvas id="myCanvas" width="300" height="300" style="border:1px solid #666;"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');
             ctx.fillRect(25, 25, 100, 100);
             ctx.clearRect(45, 45, 60, 60);
             ctx.strokeRect(50, 50, 50, 50);
        </script>
    </body>
</html>

效果显示:

填充颜色和描边颜色设置

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';//填充颜色
ctx.strokeStyle = 'green';//描边颜色

使用路径绘制图形
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形我们需要做以下几步。

创建路径起始点
使用画布的各种方法划出路径
然后把路径封闭
一旦路径生成，你就能通过描边或填充路径区域来渲染图形

绘制路径常用api
beginPath()

新建一条路径，生成之后，图形绘制api被指向到路径上生成路径。无参数

closePath()

闭合路径之后图形绘制api又重新指向了上下文中

stroke()

 通过线条来绘制图形轮廓

fill()

通过填充路径的内容区域生成实心的图形

moveTo(x,y)

：将画笔移动到指定的坐标x以及y上

当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径

lineTo(x,y)

:绘制直线，绘制一条从当前位置到指定x以及y位置的直线

该方法有两个参数：x以及y ，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，等等。。。开始点也可以通过moveTo()函数改变。

看个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <canvas id=

最低0.47元/天解锁文章

李维伊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫