zoukankan      html  css  js  c++  java
  • canvas(02绘制图形)

    本篇LIST

    栅格
    绘制矩形
    绘制路径 - 绘制一个三角形,移动笔触,线,圆弧,矩形
    

    1.栅格

    在这里插入图片描述

    2.绘制矩形

    canvas 只支持两种形式的图形绘制:矩形和路径(由一系列点连成的线段)。

    canvas提供了三种方法绘制矩形:

    在这里插入图片描述

    3.绘制路径

    图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一个子路径,都是闭合的。使用路径绘制图形需要一些额外的步骤。

    1. 首先,你需要创建路径起始点。
    2. 然后你使用画图命令去画出路径。
    3. 之后你把路径封闭。
    4. 一旦路径生成,你就能通过描边或填充路径区域来渲染图形。

    以下是所要用到的函数:

    beginPath()
    新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径。
    closePath()
    闭合路径之后图形绘制命令又重新指向到上下文中。
    stroke()
    通过线条来绘制图形轮廓。
    fill()
    通过填充路径的内容区域生成实心的图形。
    在这里插入图片描述

    绘制一个三角形
    function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
    
        ctx.beginPath();
        ctx.moveTo(75, 50);
        ctx.lineTo(100, 75);
        ctx.lineTo(100, 25);
        ctx.fill();
      }
    }
    

    在这里插入图片描述

    移动笔触

    moveTo(x, y)
    将笔触移动到指定的坐标x以及y上。
    一个非常有用的函数,而这个函数实际上并不能画出任何东西

    线

    lineTo(x, y)
    绘制一条从当前位置到指定x以及y位置的直线。
    绘制直线,需要用到的方法lineTo()。

    圆弧

    绘制圆弧或者圆,我们使用arc()方法。当然可以使用arcTo(),不过这个的实现并不是那么的可靠,所以我们这里不作介绍。
    arc(x, y, radius, startAngle, endAngle, anticlockwise)
    画一个以(x,y)为圆心的以radius为半径的圆弧(圆),从startAngle开始到endAngle结束,按照anticlockwise给定的方向(默认为顺时针)来生成。
    arcTo(x1, y1, x2, y2, radius)
    根据给定的控制点和半径画一段圆弧,再以直线连接两个控制点。

    function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext){
        var ctx = canvas.getContext('2d');
    
        for(var i = 0; i < 4; i++){
          for(var j = 0; j < 3; j++){
            ctx.beginPath();
            var x = 25 + j * 50; // x 坐标值
            var y = 25 + i * 50; // y 坐标值
            var radius = 20; // 圆弧半径
            var startAngle = 0; // 开始点
            var endAngle = Math.PI + (Math.PI * j) / 2; // 结束点
            var anticlockwise = i % 2 == 0 ? false : true; // 顺时针或逆时针
    
            ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
    
            if (i>1){
              ctx.fill();
            } else {
              ctx.stroke();
            }
          }
        }
      }
    }
    

    在这里插入图片描述

    矩形

    直接在画布上绘制矩形的三个额外方法,正如我们开始所见的绘制矩形,同样,也有rect()方法,将一个矩形路径增加到当前路径上。
    rect(x, y, width, height)
    绘制一个左上角坐标为(x,y),宽高为width以及height的矩形。
    当该方法执行的时候,moveTo()方法自动设置坐标参数(0,0)。也就是说,当前笔触自动重置回默认坐标。


        感谢您花时间阅读此篇文章,如果您觉得看了这篇文章之后心情还比较高兴,可以打赏一下,请博主喝上一杯咖啡,让博主继续码字……
        本文版权归作者和博客园共有,来源网址:https://blog.csdn.net/weixin_46498102 欢迎各位转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接
  • 相关阅读:
    learnyou 相关网站
    hdu 3038 How Many Answers Are Wrong
    hdu 3047 Zjnu Stadium 并查集高级应用
    poj 1703 Find them, Catch them
    poj 1182 食物链 (带关系的并查集)
    hdu 1233 还是畅通工程
    hdu 1325 Is It A Tree?
    hdu 1856 More is better
    hdu 1272 小希的迷宫
    POJ – 2524 Ubiquitous Religions
  • 原文地址:https://www.cnblogs.com/jackson1/p/13606344.html
Copyright © 2011-2022 走看看