首页 > 代码库 > canvas

canvas

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)

canvas