canvas基本绘制图形

Posted 2020-08-12

canvas H5新增的元素，提供了强大的图形的绘制，变换，图片，视频的处理等等。需要使用javascript脚本操作

浏览器支持

大多数的现代浏览器都可以支持；IE8以下的浏览器不支持

画布 可支持设置宽高，默认宽高300 150

 

获取canvas元素

var mycanvas = document.getElementById("myCanvas");

获取绘制环境（相当于画笔）

var context = mycanvas.getContext("2d");

是自带的好h5对象，拥有多种绘制路径，矩形，圆形，文本等方法

 

绘制线

开始绘制

context.beginPath();

设置起点的坐标

moveTo(x,y) 

 

设置样式(颜色，渐变或模式)

context.strokeStyle = "yellow";

设置填充颜色

context.fillStyle = "blue";

context.fill();

设置线条宽度

context.lineWidth = 5;

设置线条结束端 lineGap

设置拐角类型   lineJoin

context.lineCap = "round";

绘制

context.stroke();

 

绘制矩形

fillRect()  绘制填充的矩形

strokeRect() 绘制无填充的矩形

 

阴影颜色 shadowColor

阴影的模糊级别 shadowBlur

阴影的水平偏移量 shadowOffsetX

阴影的垂直偏移量 shadowOffsetY

 

绘制文字

strokeText() 绘制空心文本

fillText()  绘制实心文本

 

线性渐变

createLinearGradient(x0,y0,x1,y1)

x0,y0,x1,y1起始位置的坐标和结束位置的坐标

var linear = context.createLinearGradient(100, 350, 400, 450);

addColorStop()

参数1：对应颜色的位置，[0,1]

参数2：对应的颜色（字符串形式）

linear.addColorStop(0, "red");

linear.addColorStop(0.5, "yellow");

linear.addColorStop(1, "blue");

context.fillStyle = linear;

context.fillRect(0, 350, 500, 25);

context.fillRect(0, 0, 500, 500);

 

径向渐变

context.createRadialGradient(x0,y0,r0,x1,y1,r1)

x0,y0,r0,x1,y1,r1径向渐变的起始位置和结束位置对应的坐标和渐变半径 

var grad = context.createRadialGradient(150, 150, 50, 150, 150, 150);

grad.addColorStop(0, "red");

grad.addColorStop(0.5, "yellow");

grad.addColorStop(1, "blue");

context.fillStyle = grad;

context.fillRect(0, 0, 300, 300);

 

图形变换

平移 旋转 缩放

translate() 平移 重置画布

平移操作只会影响后面图形的位置，是不会影响前面图形的

context.fillStyle = grad;

context.fillRect(300, 300, 100, 100);

context.translate(50, 50);

 

rotate()旋转 

context.rotate(Math.PI / 4);

 

scale(w,h) 设置x方向和y方向的缩放比。大于1：放大，小于1：缩小

context.scale();

 

贝塞尔曲线

二次方贝塞尔曲线

context.quadraticCurveTo(cx,cy,x1,y1);

参数：cx,cy  二次方贝塞尔曲线的控制点坐标位置

      x1,y1  结束点坐标位置

context.beginPath();

context.moveTo(50, 50);

context.quadraticCurveTo(100, 100, 150, 20);

context.stroke();

 

三次方贝塞尔曲线

bezierCurveTo(cx1,cy1,cx2,cy2,x,y)

前四个参数：代表两个控制点的坐标位置

后两个参数：代表结束点的坐标位置