canvas绘制圆形简明教程

最新推荐文章于 2024-01-01 16:24:53 发布

Akimoto Hiroshi

最新推荐文章于 2024-01-01 16:24:53 发布

阅读量1.4k

点赞数 1

分类专栏： css 文章标签： css canvas css3

本文链接：https://blog.csdn.net/dyw3390199/article/details/114253603

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

画直线图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas demo</title>
</head>
<body>
  <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
  </canvas>
  <script>
    window.onload = function() {
      var canvas = document.querySelector('canvas')

      canvas.height = 768
      canvas.width = 1024

      var context = canvas.getContext('2d')
      if (!context) {
        alert('当前浏览器不支持canvas,请更换浏览器后再试')
      }

      // 每次绘制都要用beginPath和closePath分开
      context.beginPath()
      // 把画笔落在(100,100)处
      context.moveTo(100, 100)
      context.lineTo(600,600)
      context.lineTo(700,600)
      context.lineTo(700,300)
      context.lineTo(0,600)
      context.closePath()
      context.lineWidth = 5
      context.strokeStyle = 'green'
      context.fillStyle = 'lightgreen'
      // 填充颜色
      context.fill()
      // 绘制边框
      context.stroke()
      // 每次绘制都要用beginPath和closePath分开
      context.beginPath()
      context.moveTo(650,650)
      context.lineTo(650,750)
      context.lineTo(750,750)
      context.lineTo(750,650)
      context.closePath()
      context.strokeStyle = 'lightblue'
      context.stroke()
    }
  </script>
</body>
</html>

效果：
在这里插入图片描述
比较重要的API:

// 初始化
// 获取当前canvas
var canvas = document.querySelector('canvas')
// 设置canvas大小
canvas.height = 768
canvas.width = 1024
// 获取context作为画布，这里绘制2d图形
var context = canvas.getContext('2d')

// 每次绘制都要用beginPath和closePath分开
context.beginPath()

// 把画笔落在(100,100)处
context.moveTo(100, 100)

// 画到下一个点的位置
context.lineTo(600,600)

// 结束绘画路径
context.closePath()

// 填充颜色
context.fill()
// 绘制边框
context.stroke()

画曲线图

在这里插入图片描述

    window.onload = function () {
      var canvas = document.querySelector('#canvas')
      canvas.height = 768
      canvas.width = 1024
      var context = canvas.getContext('2d')
      if(!context) {
        alert('当前浏览器不支持canvas')
      } else {
        context.lineWidth = 5
        context.strokeStyle = 'lightblue'
        context.arc(300,300,100,0,1.5*Math.PI, true)
        context.stroke()
      }
    }

效果：
在这里插入图片描述
context.arc最后一个参数是true，表示逆时针，默认是false，表示顺时针：

context.arc(300,300,100,0,1.5*Math.PI, false)

在这里插入图片描述

注意，`context.closePath()`会自动把图形连接成一个封闭图形：

    window.onload = function () {
      var canvas = document.querySelector('#canvas')
      canvas.height = 768
      canvas.width = 1024
      var context = canvas.getContext('2d')
      if(!context) {
        alert('当前浏览器不支持canvas')
      } else {
        context.lineWidth = 5
        context.strokeStyle = 'lightblue'
        context.beginPath()
        context.arc(300,300,100,0,1.5*Math.PI, false)
        context.closePath()
        context.stroke()
      }
    }

在这里插入图片描述
再看一个例子：

window.onload = function () {
      var canvas = document.querySelector('#canvas')
      canvas.height = 768
      canvas.width = 1024
      var context = canvas.getContext('2d')
      if (!context) {
        alert('当前浏览器不支持canvas')
      } else {
        context.lineWidth = 5
        context.strokeStyle = 'lightblue'

        for (var i = 0; i < 10; i++) {
          context.beginPath()
          context.arc(50 + i * 100, 200, 40, 0, 2 * Math.PI * (i + 1) / 10)
          context.stroke()
        }

		context.fillStyle = 'pink'
        for (var i = 0; i < 10; i++) {
          context.beginPath()
          context.arc(50 + i * 100, 400, 40, 0, 2 * Math.PI * (i + 1) / 10)
          context.stroke()
          context.fill()
        }
      }
    }

在这里插入图片描述

Akimoto Hiroshi

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
canvas绘制圆形简明教程

画直线图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas
复制链接

扫一扫