canvas标签 定义图形 只是一个图形容器 必须用脚本来绘制图形
<canvas id="myCanvas">您的浏览器不支持canvas标签</canvas> 里面的文字在浏览器不支持canvas时显示
固定用法:
1.获取对象 var canvas = document.getElementById('myCanvas');
2.画笔 / 画布的上下文对象var ctx = canvas.getContext('2d');
基本属性:
cxt.lineWidth//画笔宽度
cxt.strokeStyle// 画笔的颜色、渐变、模式需要 stroke() 显示
fillStyle //填充的颜色、渐变、模式 需要 fill()显示
moveTo(x,y)//起始点
lineTo(x,y)//画到下一个点
stroke() //绘制已定义的路径 显示绘画
arc(100,100,50,0,360*Math.PI/180,false)圆// arc(x,y,r,起始点,终止点,方向)点:2*Math.PI == 360(度数)*Math.PI/180
方向(Boolean值 ture顺 false逆时针)
rect(100,100,200,100)矩形 //rect(x,y(左上角坐标),宽,高)
cxt.strokeRect(20,20,100,100) //不需要stroke()显示
cxt.fillRect(150,150,100,50); //不需要fill()显示需要有填充颜色fillStyle
使用新的画笔 需要开启路径
cxt.beginPath();
cxt.closePath();// 在stroke()方法前后前:继续画画来行成封闭路径后:直接封闭路径;
加载图片
var myImg = new Image();
myImg.src = "images/bg.png";//或者是获取页面上的某个img标签对象var myImg = document.getElementById('myImg');
myImg.onload = function() {
cxt.save();// 保存canvas状态 先保存再调用canvas的平移、旋转等操作
// 图片的旋转
cxt.translate(150,150); // 重新映射画布上的(0,0)位置
cxt.rotate(-30*Math.PI/180); //负数为逆时针正为顺时针
cxt.drawImage(myimg,0,110,300,275); // drawImage(对象,x,y,宽,高)
cxt.restore();//恢复canvas之前保存的状态和save()配对使用,使用次数要小于等于save()的使用次数
cxt.drawImage()语法有三个:
1.cxt.drawImage(myImg,x,y);
2.cxt.drawImage(myImg,x,y,width,height);
// 剪切图像
3. cxt.drawImage(myImg,sx,sy,swidth,sheight,x,y,width,height);
加载文字
cxt.font = "50px 宋体";
//填充字体
cxt.fillText("hello world",20,100);
//路径字体
cxt.strokeText("hello world",40,150);
添加渐变色
var grandient = cxt.createRadialGrandient(x0,y0,r,x,y,r);//创建放射状/圆形渐变对象
grandient.addColorStop(0,"#0a0a0a"); //参数一:0.0--1.0 之间 表示渐变中开始与结束之间的位置
//参数二:在结束位置显示的CSS颜色值
grandient.addColorStop(1,"#636766");
cxt.fillStyle = grandient;