canvas

Posted 2020-09-26 没入门的小学员

canvas

 

标签含义

• 用来定义图形，是一个容器，基于javascript的绘图脚本

使用

• 创建画布

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000"></canvas>

• 用javascript来绘制图像

//获取这个画布
var c=document.getElementById(‘myCanvas‘);
//创建context对象
var ctx=c.getContext(‘2d‘);
//填充色
ctx.fillStyle="#FF0000";
//（x,y,width,height），用这个红色的举行填充
ctx.fillRect(0,0,150,75)

• 路径 
  
  • 直线 
    
    • moveTo（x，y）：定义线条开始坐标
    • lineTo(x,y)：定义线条结束坐标
    • stroke（）：填充这条线

var c=docuemnt.getElementById("myCanvas");
var ctx=c.getContext(‘2d‘);
ctx.moveTo(0,0,);
cyx.lineTo(200,200);
ctx.stroke()

• 圆形 
  
  • arc(z,y,r,start,stop)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//2*Math.PI是弧长，表示整个圆
ctx.arc(0,0,10,0,2*Math.PI)
str.stroke();
//填充色，默认黑色
str.fill()

• 文本 
  
  • 属性和方法 
    
    • font：定义字体
    • fillText：绘制实心的文本
    • strokeText：绘制空心文本

var c=document.getElementById(‘myCanvas‘);
var ctx=c.getContext(‘2d‘);
ctx.font(‘30px Arial‘);
ctx.fillText()

• 渐变 
  
  • createLinearGradient（x,y,x1,y1）:线性渐变
  • createRadialGradient(x,y,x1,y1)：径向渐变
  • addColorStop（）：指定颜色停止参数可以是0-1

var c=document.getElementById(‘myCanvas‘);
var ctx=c.getContext(‘2d‘);
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,‘red‘);
grd.addColorStop(1,‘white‘);
//制定填充的颜色
ctx.fillstyle=grd;
//制定填充的位置
ctx.fillRect(10,10,150,80)

• 图像 
  
  • draw image（image,x,y）