关于canvas

标签：

 //在给定的矩形内清除指定的像素
//语法：context.clearRect(x,y,width,height)
//参数：要清除的矩形左上角的 x，y 坐标,以及宽与高,单位是像素 
// 加载图片
var gravel = new Image();
gravel.src = "gravel.jpg"; 

// 保存当前状态
context.save();
// 字号为60,字体为Impact
context.font = "60px impact";

//填充颜色
context.fillStyle = ‘#996600‘;

//居中
context.textAlign = ‘center‘;

// 颜色黑色，20%透明度
// 向右移动15px,向左移动10px
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;

// 将第二图的高宽放大到原来的2倍
context.scale(2, 2);

// 轻微模糊阴影
context.shadowBlur = 2;
context.shadowColor = ‘rgba(0, 0, 0, 0.2)‘;

//绘制文本
context.fillText(‘Happy Trails!‘, 200, 60, 400);

// 恢复之前的canvas状态
context.restore();

下面是一些具体写法


    创建画布
     <canvas width="1000px" height="600px" id="canvas">不支持canvas</canvas>
    
    <script>
    function $(id){
    return document.getElementById(id)
    }
    var canvas=$("canvas")
    var context=canvas.getContext("2d")//画笔
    
    
    //填充
    fillRect()；调用函数
    function fillRect(){
    //context.fillStyle="rgb(255 0 255)"//填充颜色
    context.fillStyle="red";

    context.fillRect(20,10,100,100)       //x、y、width、height
    }

    //设置阴影
    setShadow();
    function setShadow(){
    context.fillStyle="blue";
    context.shadowColor="red"//颜色
    context.shadowBlur="30"//模糊级数
    context.shadowOffsetX=10;//方向
    context.shadowOffsetY=10;
    context.fillRect(130,10,100,100)
    
    
    }
    //画空白框
    drawStrokeRect()
    function drawStrokeRect(){
    context.strokeStyle = "blue";//颜色
    context.lineWidth = 2;//border宽度
    context.strokeRect(x,y,width,height);//xy左上点坐标，矩形宽长
    }
    //设置渐变
    var grd;
    setGradinet()
    function setGradinet(){
    grd = context.createLinearGradient(10,0,210,0);//x0,y0渐变开始点坐标,x1,y1结束点坐标
    grd.addColorStop(0,"rgb(255,0,255)");
    grd.addColorStop(1,"white");
    //同心圆
     /* grd = context.createRadialGradient(80,160,20,80,160,50);//x0,y0,r0,x1,y1,r1两圆不相交
     grd.addColorStop(0,"rgb(255,0,255)");//第一个圆，0表示圆的位置
     grd.addColorStop(1,"white");//第二个圆，1表示圆的位置
    */
    context.fillStyle=grd;
    context.fillRect(10,130,150,100)
    
    }  
    </script>

关于canvas

标签：

原文地址：http://www.cnblogs.com/zengjie123/p/4641519.html