【html】canvas画出简单的组合图形

最新推荐文章于 2021-06-04 03:55:52 发布

一颗甜橙树

最新推荐文章于 2021-06-04 03:55:52 发布

阅读量225

点赞数

分类专栏：前端面试 html

本文链接：https://blog.csdn.net/kikikiuu/article/details/109819418

版权

前端面试同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面试canvas</title>
</head>
<body>
    <canvas id='canvas' width="500" height="500" style="background-color: black;"></canvas>
</body>
<script>
  function draw(){
    var canvas=document.getElementById('canvas')
    if(!canvas.getContext) return
    //1.getContext返回一个在画布上绘图的环境,返回绘制时的方法和属性
    var ctx=canvas.getContext('2d')
    // 2.开始一条路径
    ctx.beginPath()
    // 3.移动到位置（0,0）
    ctx.moveTo(0,0)
    // 4.创建到达位置的线
    ctx.lineTo(250,250)
    ctx.lineTo(500,0)
    // ctx.closePath()   //和stroke空心的一起使用
    ctx.fillStyle='#ffffff'
    // ctx.strokeStyle="white";
    // ctx.stroke()
    ctx.fill()
  }
  draw()
</script>
</html>

显示出来的图形如下：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一颗甜橙树

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【html】canvas画出简单的组合图形

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>面试canvas</title></head><body> <canvas i.
复制链接

扫一扫