首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[HTML5] Canvas绘制简单形状

[HTML5] Canvas绘制简单形状

作者头像
唯一Chat
发布2019-09-10 15:38:42
1K0
发布2019-09-10 15:38:42
举报
文章被收录于专栏:陶士涵的菜地陶士涵的菜地

使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画

获取canvas对象,调用document.getElementById()方法

调用canvas对象的getContext()方法,获取context对象,参数:String的”2d”

绘制线段

调用context对象的moveTo()方法,把起点位置定义好,参数:x,y

调用context对象的lineTo()方法,把终点位置定义好,参数:x,y

调用context对象的stroke()方法,画一条线

如果不调用moveTo()方法,起点的位置是上次的点

绘制矩形

调用context对象的fillRect()方法,填充矩形,参数:起点横坐标,起点纵坐标,宽度,高度

调用context对象strokeRect()方法,边框矩形,参数:起点横坐标,起点纵坐标,宽度,高度

例如:context.fillRect(0,0,100,100); 会画出一个黑色的矩形

注意:html5 canvas fillRect坐标和大小一直不对,是因为canvas的宽度和高度必须内联在canvas标签中才对

绘制扇形

调用context对象的beginPath()方法,开启路径

调用context对象的moveTo()方法,把路径移动到圆心位置,参数:x,y

调用context对象的arc()方法,绘制圆弧,参数:圆心x坐标,圆心y坐标,开始角度,结束角度

调用context对象的closePath()方法,关闭路径

调用context对象的fill()方法,填充颜色

绘制贝塞尔曲线

调用context对象的bezierCurveTo()方法,绘制曲线路径,

参数:第一控制点x,第一控制点y,

第二控制点x,第二控制点y,

最终控制点x,最终控制点y

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试canvas</title>
</head>
<body>
<canvas id="myCanvas" width="500px" height="1000px"></canvas>
<script>
    var canvas=document.getElementById('myCanvas');
    var context=canvas.getContext("2d");

    //绘制矩形
    context.fillRect(0,0,100,100);
    context.strokeRect(120,0,100,100);

    //绘制扇形
    context.beginPath();
    context.moveTo(50,220);
    context.arc(50,220,50,0,Math.PI/4);
    context.closePath();
    context.fill();

    //绘制线段
    context.moveTo(0,300);
    context.lineTo(100,300);
    context.lineTo(100,400);
    context.stroke();

    //绘制贝塞尔曲线
    context.moveTo(200,300);
    context.bezierCurveTo(200,300,250,300,300,400);
    context.stroke();
</script>
</body>
</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-05-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档