H5 canvas 笔记 一

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;