HTML5 Canvas绘图基础（待更新）

最新推荐文章于 2024-07-06 17:55:28 发布

清流nice

最新推荐文章于 2024-07-06 17:55:28 发布

阅读量367

点赞数

分类专栏： html5 文章标签： canvas html5

本文链接：https://blog.csdn.net/likaixuan1998/article/details/52432187

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文为作者学习canvas时的笔记，有错误在所难免，欢迎大家指正！

Canvas浅谈

Canvas是html5新增的专门用来绘制图形的元素，在html页面上放置一个canvas元素就相当于在页面上放置了一块画布（默认大小为300*100，也可以通过width和height来设置）， Canvas只是一块无色透明的区域，我们可以利用javascript编写在其中绘画的脚本。

1.1 放置了一块400*400的画布

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Canvas基础</title>
    <body>
        <canvas width="400" height="400" id="myCanvas"></canvas>
    </body>
</html>

1.2 在画布上绘制一个 100*100的填充色为红色的矩形

1.2效果图

1.2代码

    <script>
            var test=document.getElementById("myCanvas");
            //返回h5内建对象，该对象能够在画布中绘制2D图像，例如绘制线条，路径，矩形，圆形等方法
            var context=test.getContext("2d");
            //设置填充颜色为red
            context.fillStyle="red";
            //从0,0点(Canvas的左上角，x轴水平向右衍伸，y轴垂直向下衍伸)开始画一个100*100的具有填充色的矩形
            context.fillRect(0,0,100,100);
    </script>

1.3 在画布上绘制一个 100*100的边框色为蓝色的矩形

1.3效果图

1.3代码

    <script>
            var test=document.getElementById("myCanvas");
            //返回h5内建对象，该对象能够在画布中绘制2D图像，例如绘制线条，路径，矩形，圆形等方法
            var context=test.getContext("2d");
            //设置边框色为blue
            context.strokeStyle="blue";
            //从0,0点(Canvas的左上角，x轴水平向右衍伸，y轴垂直向下衍伸)开始画一个100*100的具有轮廓色的矩形
            context.strokeRect(0,0,100,100);
    </script>

1.4 总结
1.Canvas坐标: 坐标原点(0,0)位于Canvas左上角，x轴水平向右衍伸，y轴垂直向下衍伸
2.fillStyle用于指定绘制图形的填充色，fillRect(x,y,width,height)方法用于以指定的颜色填充一个矩形
3.strokeStyle用于指定轮廓色(线条),strokeRect(x,y,width,height)方法用于绘制矩形轮廓

暂时更新至此-以后会继续更新

清流nice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas绘图基础（待更新）

本文为作者学习canvas时的笔记，有错误在所难免，欢迎大家指正！Canvas浅谈 Canvas是html5新增的专门用来绘制图形的元素，在html页面上放置一个canvas元素就相当于在页面上放置了一块画布（默认大小为300*100，也可以通过width和height来设置）， Canvas只是一块无色透明的区域，我们可以利用javascript编写在其中绘画的脚本。 1.1 放置了一块4
复制链接

扫一扫