阴影主要是以下几个属性值

var context = draw.getContext('2d'); //设置阴影 context.shadowColor = 'rgba(210,210,210,.5)'; context.shadowOffersetX = '5'; 渐变 创建一个新的线性渐变 createLinearGradient()方法，有四个参数|x1|y1|x2|y2|分别为起点的坐标和终点的坐标 var gradient = context.createLinearGradient(30,30,70,70); gradient.addColorStop(0,'#fff'); //0表示开始 gradient.addColorStop(1,'#000'); //1表示结束 //使用定义好的渐变属性 context.fillStyle = gradient; //填充的时候放入渐变 context.fillRect(30,30,50,50);

创建一个放射渐变 createRadialGradient(),六个参数|x1|y2|radius1|x2|y2|radius2|分别为第一个圆心和半径第二个圆心和半径，用法和线性渐变相同

10 . 使用图像数据，可以通过getImageData()取得原始图像数据。四个参数|x|y|w|h|。每个ImageData对象有三个属性，width/height/data，data是一个数组，内部存着每一个像素的数据,每个元素的值介于0-255之间

var imgdata = context.getImageData(0,0,100,100); var data = imgdata.data, red = data[0], green = data[1], blue = data[2], alpha = data[3]; //实现一个灰色过滤器 var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); var img = document.getElementsByTagName('image')[0], imageData,data, i,len,average, red,green,blue,alpha; //绘制原始图像 context.drawImage(img,0,0,100,100); //获取图像数据 imageData = context.getImageData(0,0,img.width,img.height); data = imageData.data; for(i=0,len=data.length;i<len;i+=4){ red = data[i]; green = data[i+1]; blue = data[i+2]; alpha = data[i+3]; //计算rgb的平均值 average = Math.floor((red+green+blue)/3); //设置颜色值 data[i] = average; data[i+1] = average; data[i+2] = average; } imageData.data = data; //把数据绘制在画布 context.putImageData(imageData,0,0) }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持ASPKU源码库。