您的位置:时时app平台注册网站 > web前端 > canvas学习(后生可畏)

canvas学习(后生可畏)

2019-12-06 23:03

2.绘制矩形

绘图阴影

黑影颜色:shadowColor = "color";
黑影模糊度:shadowblur = number;
阴影偏移X:shadowOffsetX = number;
影子偏移Y:shadowOffsetY = number;

context.shadowColor = "black";
context.shadowBlur = 20;
context.shadowOffsetX = 10;
context.shadowOffsetY = 5;

context.strokeRect(100,100,100,100);

图片 1

(2)然后再将随便颜色加进去

拿到canvas标签及上下文

canvas标签使用js平常dom节点的拿走格局获得

var canvas = document.getElementById('canvas1');

上下文是记录canvas实践命令语句之处,获取如下,前面包车型客车参数今后唯有2d可选

var context = canvas.getContext('2d');
//绘制干扰线
            for(var i = 0; i < 8; i    ){
                context.strokeStyle = getColor();
                context.beginPath();
                context.moveTo(Math.random()*120,Math.random()*40);
                context.lineTo(Math.random()*120,Math.random()*40);
                context.stroke();
            }

画布宽高设置:

行使canvas标签的习性,width及height直接在行间设置

此处注意:不要用css样式去改画布大小,那个会导致画布中的图像被拉伸

<canvas id="canvas1" width="800" height="500"></canvas>

因为canvas是多个画布,所以canvas中的内容只是“画”中的生机勃勃有的,不可能独立旋转,这里旋转的法规是每当绘制三个数字的事情发生前将画布移动到对应数字的x,y的点,然后以点举行旋转,旋转好今后,绘制随机数,最终将画布还原到原位进行下一个自便数的绘图

制图图形

8.重复赢得验证码

绘图像和文字字

设置文字样式:context.font = 'italic size family'

  1. italic:斜体
  2. size:字体大小
  3. family:字体

安装文字内容:context.strokeText("text",x,y)

  1. "text":普通话字内容
  2. x:起始x坐标
  3. y:起始y坐标

context.lineWidth = 1;
context.strokeStyle = "green";
context.font = "italic 150px arial"
context.strokeText("我是文字",50,200);

图片 2

2.制图一个矩形

画布css样式

画布的别的css样式能够健康设置

canvas标签中的内容
canvas标签中的内容是(富含标签)唯有在不帮忙此意义的低版本浏览器中才会展现的;在高版本浏览器中不会显得出来

<canvas id="canvas1" width="800" height="500">
    只是一个canvas标签,然而你看不到
</canvas>
    function getColor(){
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            if(r == 255 && g == 255 && b == 255){
                r = 0;
                g = 0;
                b = 0;
            }
            return "rgb(" r "," g "," b ")";
        }
耳闻则诵样式

线性渐变:createLinearGradient(x1,y1,x2,y2卡塔尔(英语:State of Qatar)

  1. x1/y1:渐变初阶地点坐标
  2. x2/y2:渐变利落地方坐标

通往渐变:createRadiusGradient(x1,y1,r1,x2,y2,r2卡塔尔(英语:State of Qatar)

  1. x1/y1:渐变开头圆的圆心地点坐标
  2. r1:渐变开头圆半径
  3. x2/y2:渐变利落圆的圆心地点坐标
  4. r2:渐变利落圆半径

耳熏目染颜色设置:addColorStop(%,"color"卡塔尔(قطر‎;

  1. %:渐变进程,用[0,1]时期的数字代表
  2. "color":各个渐变阶段的颜料

var linearGradient = context.createLinearGradient(100,300,800,500);

linearGradient.addColorStop(0,"red");
linearGradient.addColorStop(0.4,"yellow");
linearGradient.addColorStop(0.8,"green");
linearGradient.addColorStop(1,"blue");

context.fillStyle = linearGradient;

context.font = "italic 150px arial"
context.fillText("我是文字",50,200);

图片 3

下一场将绘制随机数的代码封装成三个措施,笔者这里方法为draw(卡塔尔国,canvas的幼功代谢须求再行定义画布

坐标系旋转:rotate(θ卡塔尔(قطر‎
  1. 将坐标系旋转θ度
  2. θ > 0时顺时针旋转,θ < 0时逆时针转动

效果图:

坐标系缩放:scale(x,y卡塔尔(قطر‎
  1. 将坐标系x方向放大x倍
  2. 将坐标系y方向放大y倍

注意:因为坐标系在通过调换之后,之后再一次绘制的图样都会以那些新的坐标系为参照;所以在绘制的时候会相当的分神

不留余地方案如下:

save():保存当前坐标系

restore():读取保存的坐标系

  1. 每一趟在进展坐标系转换早前,先使用save()将原始坐标系保存下去
  2. 在进展转移之后,再使用restore()将坐标系恢复生机为始发坐标系
  3. 每个restore()对应相应的三个save(),所以在大局中保留一回随后Infinitirestore()的做法是不行的

重新得到验证码需求在body中增添二个点击事件

制图三角:方法正是绘制3条直线

制图多条连接线段时,不必每趟重复定义初阶点
画笔会停在上生机勃勃段线段的顶峰,并暗中认可为下三回绘制的开头点

context.strokeStyle = "red";
context.lineWidth = 2;

context.moveTo(10,10);
context.lineTo(10,110);
context.lineTo(110,110);
context.lineTo(10,10);
context.stroke();

小心,此处用绘制直线的办法,实行图片的绘图时;直线密封处会并发毛病,不会全盘封闭

图片 4

图片 5

 var aCode = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
坐标系平移:translate(x,y卡塔尔国
  1. 就是将坐标系的00点转换来(x,y卡塔尔国地点

(1)在html中定义画布

关掉方法:context.closePath()

加上地点的密封命令后,闭合处的短处就能够被修复
其一方法会自动将起源与末点相连,所以不用再将路线回到开首点

context.strokeStyle = "red";
context.lineWidth = 2;

context.beginPath();
context.moveTo(10,10);
context.lineTo(10,110);
context.lineTo(110,110);
context.closePath();  //封闭路径后最后一个点就不用定义了
context.stroke();

图片 6

图片 7

1, 绘制canvas画布,举办基本功设置

先用moveTo(x,y卡塔尔国设置起头点坐标
1  window.onload = function(){
2    var canvas = document.getElementById("canvas"); //获取到canvas对象
3    var context = canvas.getContext("2d"); //获取到canvas绘图环境
4      //设置画布大小
5      canvas.width = 120;
6      canvas.height = 40;
7 };
新建路径beginPath()

本条方式表示重新先导意气风发段路线,也得以知道为新建贰个图层
本条的方法之后施行的绘图动作,不会进行到这几个措施从前的下令

context.beginPath();
for(var i = 0; i < 4; i   ){
    var x = 20   i * 20;
    var y = 10   Math.random() * 10;
    var index = Math.floor(Math.random()*aCode.length); //获取到一个随机的索引值
    var txt = aCode[index]; //获取到数组里面的随机的内容
    context.font = "bold 20px 微软雅黑"; //设置文字样式
    context.fillText(txt,x,y);
}

坐标调换

1  <canvas id="canvas"></canvas>

体制设置

边框设置:context.strokeStyle
填充设置:context.fillStyle
线宽设置:context.lineWidth

context.strokeStyle = "red";
context.lineWidth = 2;
context.fillStyle = 'yellow';

压抑点和郁闷线的准绳是大同小异的,烦扰点能够充当非常小的忧愁线

贝塞尔曲线:bezierCurveTo(cpx1,cpy1,cpx2,cpy2,dx,dy卡塔尔国
  1. cpx1/xpy1:控制点1坐标
  2. cpx2/xpy2:控制点2坐标
  3. dx/dy:终点坐标

3.装置验证码的随机数

贰遍曲线quadraticCurveTo(cpx,cpy,dx,dy卡塔尔
  1. cpx/xpy:调整点坐标
  2. dx/dy:终点坐标

context.beginPath();
context.moveTo(300,100);
//贝塞尔曲线
context.bezierCurveTo(200,100,300,300,200,300);
context.stroke()

//二次曲线
context.moveTo(300,300);
context.quadraticCurveTo(400,150,500,300);
context.stroke();

图片 8

5.安装随机困扰线

绘制直线:
  1. 设置画笔最早位置:context.moveTo(x,y)
  2. 安装画笔甘休地方:context.lineTo(x,y)
  3. 线条两侧圆角:context.lineCap = "round"

context.strokeStyle = "red";
context.lineWidth = 2;
context.moveTo(100,100);
context.lineTo(500,100);
context.stroke();

图片 9

思路:

连带例子能够看自个儿的另大器晚成篇博客canvas石英手表效果

6,绘制随机郁闷点

简介:

canvas是html5最要紧的成分,提供了叁个画布的作用,有强有力的图形管理技艺

图片 10

合计导图

(1)定义一个数组贮存验证码的人身自由数,作者设置了数字和小写字母

填充 描边同时采取注意:

那五个效率还要利用时,前后相继顺序的例外会促功效果的差异

相近是在填充后再去描边,如下效果

context.strokeStyle = "red";
context.lineWidth = 2;
context.rect(150,150,200,100);
context.fill();
context.stroke();

图片 11

若果是描边后再填写的话,填充效果会遮挡四分之二的边框

//线宽被遮挡一半
context.strokeStyle = "red";
context.lineWidth = 2;
context.rect(150,150,200,100);
context.stroke();
context.fill();

图片 12

1.张开canvas的底蕴操作

绘图矩形

概念矩形:context.rect(x,y,w,h);

  1. x:发轫地方x坐标(矩形左上角)
  2. y:最早地方y坐标(矩形左上角)
  3. w:矩形宽
  4. h:矩形高

一向绘制:省去了定义矩形的步子,依照定义的体裁直接填充或描边

context.fillRect(x,y,w,h)
context.strokeRect(x,y,w,h)

橡皮擦功能:clearRect(x,y,w,h)

  1. 擦除矩形范围之内的剧情
  2. 常用来擦除整套画布以落到实处动漫效果
 //产生随机数
            for(var i = 0; i < 4; i   ){
                var deg = Math.random() * 180 * Math.PI / 180;
                var x = 20   i * 20;
                var y = 10   Math.random() * 10;
                var index = Math.floor(Math.random()*aCode.length); //获取到一个随机的索引值
                var txt = aCode[index]; //获取到数组里面的随机的内容
                context.font = "bold 20px 微软雅黑"; //设置文字样式
                context.fillStyle = getColor();
                context.translate(x,y);
                context.rotate(deg);
                context.fillText(txt,0,0);
                context.rotate(-deg);
                context.translate(-x,-y);

            }
图形绘制方式

边框式绘制:

context.strokeStyle = "red";
context.lineWidth = 2;
context.rect(150,150,200,100);
context.stroke();

图片 13

填充式绘制:

context.fillStyle = 'yellow';
context.rect(150,150,200,100);
context.fill();

图片 14

8.双重获得验证码

canvas坐标系

左上角是00点,x轴正方向向右,y轴正方向向下

图片 15

 

连带例子能够看自身另风姿浪漫篇博客canvas随拖动变化的贝塞尔曲线

(1)通过以上步骤能够看看曾经面世了随机数,接下去需求安装随机数的人身自由颜色

绘制命令
  1. 边框式绘制:context.stroke();
  2. 填充式绘制:context.fill();

(2)设置验证码的自由数

canvas标签加多

要选择canvas,首先要在body中加多上canvas标签

canvas标签是一块暗中同意300*150轻重的画布

    function refresh(){
            var canvas = document.getElementById("canvas"); //获取到canvas对象
            var context = canvas.getContext("2d"); //获取到canvas绘图环境
            draw(canvas,context);
        }

制图贝塞尔曲线/二回曲线

3.设置验证码的私下数

绘图弧形

常用方法:context.arc(x,y,r,θ1,θ2,boolean)

  1. x:中心点x坐标
  2. y:中心点y坐标
  3. r:圆半径
  4. θ1:初阶角度
  5. θ2:甘休角度
  6. 布尔值:false逆时针(默认),true顺时针

//画弧线
context.strokeStyle = "red";
context.lineWidth = 2;
context.arc(300,100,100,0,Math.PI/2,true)
context.stroke();

图片 16

//画圆
context.beginPath();
context.arc(300,200,100,0,Math.PI*2,true)
context.stroke();

图片 17

//绘制干扰点
            for(var i = 0;i <20 ;i   ){
                var x = Math.random() *120;
                var y = Math.random() *40;
                context.strokeStyle = getColor();
                context.beginPath();
                context.moveTo( x,y);
                context.lineTo(x 1,y 1);
                context.stroke();
            }

4.设置验证码随机数的自由颜色

5.绘制随机困扰线

(2)js定义

6,绘制随机烦闷点

7.旋转验证码中的随机数

4.装置验证码随机数的放肆颜色

 context.fillStyle = getColor();

经过以上两个步骤,验证码的雏形就搞好了

 <a onclick="refresh()">重新获取</a>

 

图片 18

context.strokeRect(0,0,120,40);

注:Tencent教室摄像小结

7.旋转验证码中的随机数(那黄金年代部分在章节内详细表达)

 缕清思路,然后一步步操作

本文由时时app平台注册网站发布于web前端,转载请注明出处:canvas学习(后生可畏)

关键词: