HTML5快速入门实例（一）Canvas绘制图形

最新推荐文章于 2023-07-22 23:27:17 发布

GPU小码农

最新推荐文章于 2023-07-22 23:27:17 发布

阅读量1.2k

点赞数

分类专栏： HTML5 文章标签： html5 html5游戏开发 html canvas

本文链接：https://blog.csdn.net/zjc_game_coder/article/details/44649941

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文字性的东西太多就不写了，网上很多。

我的代码注释也很详细，毕竟学习嘛。

介绍一下，开发工具用的是webstrom，真的很好用喔！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Html5游戏开发学习1-Canvas</title>
</head>
<body>
<canvas id="canvas" width="600" height="600" style="broder:black 1px solid;">
    浏览器不支持HTML5 canvas
</canvas>
<script type="text/javascript" charset="utf-8">
    //获取canvas对象的引用
    var canvas = document.getElementById('canvas');
    //获取canvas的2d绘图环境
    var context = canvas.getContext('2d');
    //绘图代码如下:
    //1.实心正方形 x,y,width,length
    context.fillRect(200,10,100,100);
    //2.实心矩形
    context.fillRect(50,70,90,30);
    //3.绘制一个空心矩形
    context.strokeRect(110,10,50,50);
    context.strokeRect(30,10,50,50);
    //清除矩形区域 x,y,width,length
    context.clearRect(210,20,30,20);
    context.clearRect(260,20,30,20);
    //4.开始绘制路径
    context.beginPath();
    context.moveTo(10,120);
    context.lineTo(10,180);
    context.lineTo(110,150);
    context.fill(); //闭合形状并且以填充的方式绘制出来
    //5.三角形的外边框
    context.beginPath();
    context.moveTo(140,160);//从该点开始
    context.lineTo(140,220);
    context.lineTo(40,190);
    context.closePath();
    context.stroke();//空心
    //绘制弧
    //6.半圆弧
    context.beginPath();
    //x,y,半径,开始角度,终止角度,顺时针(false)/逆时针(true)
    context.arc(100,300,40,0,Math.PI,true);
    context.stroke();
    //7.实心圆
    context.beginPath();
    context.arc(100,300,30,0,2*Math.PI,true);
    context.fill();
</script>
</body>
</html>

以下是代码运行效果：

GPU小码农

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5快速入门实例（一）Canvas绘制图形

文字性的东西太多就不写了，网上很多。我的代码注释也很详细，毕竟学习嘛。介绍一下，开发工具用的是webstrom，真的很好用喔！ Html5游戏开发学习1-Canvas 浏览器不支持HTML5 canvas //获取canvas对象的引用 var canvas = document.getElementById('canvas');
复制链接

扫一扫

专栏目录