Canvas常见API

1.this.canvas.getContext(‘2d’)
初始化画布

// 获取canvas元素
this.canvas = document.getElementById('tutorial')

// 获取绘制二维上下文

this.ctx = this.canvas.getContext('2d')

2.this.ctx.moveTo ，this.ctx.lineTo(150, 50)

moveTo 移动画笔到具体某个位子 lineTo 画线条到具体某个位置

this.ctx.moveTo(50, 150) // 移动画笔到 50,150 坐标处
this.ctx.lineTo(150, 50)

3.this.ctx.storkeStyle ， this.ctx.stroke()

canvas storkeStyle描边的样式设置，stroke调用次方法才能实现画线条

this.ctx.storkeStyle = '#000' // 黑色
this.ctx.storkeStyle = '#000'// 黑色
this.ctx.storkeStyle= 'rgba(255,255,255,1.0)' // 红色
this.ctx.storke()

4.this.ctx.fillStyle ， this.ctx.fill()

canvas fillStyle 填充的样式设置，fill调用次方法才能实现画填充物—一般都是作用于有形状的物体

this.ctx.fillStyle = '#000' //
this.ctx.fillStyle = '#000'//
this.ctx.fillStyle= 'rgba(255,255,255,1.0)'
this.ctx.fill()

5.this.ctx.fillRect() ， this.ctx.storkeRect()

6.this.ctx.beginPath()
只要绘制一个线段或者一个原点就得写在这里面
在这里插入图片描述

6.this.ctx.lineCap() ， this.ctx.lineJoin() , this.ctx.lineWidth()

lineCap 设置线端点的样式 lineJoin 线连接点的样式 lineWidth 线宽度

this.ctx.lineCap = 'butt' //平直边缘
this.ctx.lineCap = 'round' //端点是半圆
this.ctx.lineCap = 'square' //端点时加了一个以线宽为长，一半线宽为宽的矩形 也就是说线条会变长
this.ctx.lineCap = 'miter' //默认值
this.ctx.lineCap = 'bevel' // 连接处是对斜角
this.ctx.lineCap = 'round' //为圆形连接处
this.ctx.lineWidth = '10' //平直边缘

// 开始绘制图形
this.ctx.lineCap = 'butt’
this.ctx.lineJoin = 'miter’
this.ctx.lineWidth = '100’
this.ctx.moveTo(50, 150)
this.ctx.lineTo(250, 100)
this.ctx.stroke()

还有很多请看这：https://juejin.cn/post/6969545452622446605
转自：https://juejin.cn/post/6969545452622446605

canvas实现验证码功能

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>caseydemo</title>
  </head>
  <body>
  <canvas id="canvas" width="170" height="60"></canvas>
  <a href="#" id="changeImg">看不清，换一张</a>
  <script>
    /**生成一个随机数**/
    function randomNum(min,max){
      return Math.floor( Math.random()*(max-min)+min);
    }
    /**生成一个随机色**/
    function randomColor(min,max){
      var r = randomNum(min,max);
      var g = randomNum(min,max);
      var b = randomNum(min,max);
      return "rgb("+r+","+g+","+b+")";
    }
    drawPic();
    document.getElementById("changeImg").onclick = function(e){
      drawPic();
    }
 
    /**绘制验证码图片**/
    function drawPic(){
      var canvas=document.getElementById("canvas");
      var width=canvas.width;
      var height=canvas.height;
      var ctx = canvas.getContext('2d');
      ctx.textBaseline = 'bottom';
 
      /**绘制背景色**/
      ctx.fillStyle = randomColor(180,240); //颜色若太深可能导致看不清
      ctx.fillRect(0,0,width,height);
      /**绘制文字**/
      var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
      for(var i=0; i<4; i++){
        var txt = str[randomNum(0,str.length)];
        ctx.fillStyle = randomColor(50,160);  //随机生成字体颜色
        ctx.font = randomNum(25,50)+'px SimHei'; //随机生成字体大小
        var x = 20+i*25;
        var y = randomNum(45,55);
        var deg = randomNum(-45, 45);
        //修改坐标原点和旋转角度
        ctx.translate(x,y);
        ctx.rotate(deg*Math.PI/180);
        ctx.fillText(txt, 0,0);
        //恢复坐标原点和旋转角度
        ctx.rotate(-deg*Math.PI/180);
        ctx.translate(-x,-y);
      }
      /**绘制干扰线**/
      for(var i=0; i<4; i++){
        ctx.strokeStyle = randomColor(40,180);
        ctx.beginPath();
        ctx.moveTo( randomNum(0,width), randomNum(0,height) );
        ctx.lineTo( randomNum(0,width), randomNum(0,height) );
        ctx.stroke();
      }
      /**绘制干扰点**/
      for(var i=0; i<100; i++){
        ctx.fillStyle = randomColor(0,255);
        ctx.beginPath();
        ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);
        ctx.fill();
      }
    }
  </script>
  </body>
</html>

转自：https://blog.csdn.net/caseywei/article/details/83658214

# 前端
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区