//在给定的矩形内清除指定的像素
//语法：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>