全网整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：400-708-3566
电脑端+手机端+微信端=数据同步管理
免费咨询热线：400-708-3566
话不多说，请看代码
<!DOCTYPE html ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function draw21(id) {
var canvas = document.getElementById(id)
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//实践表明在不设施fillStyle下的默认fillStyle=black
context.fillRect(0, 0, 100, 100);
//实践表明在不设施strokeStyle下的默认strokeStyle=black
context.strokeRect(120, 0, 100, 100);
//设置纯色
context.fillStyle = "red";
context.strokeStyle = "blue";
context.fillRect(0, 120, 100, 100);
context.strokeRect(120, 120, 100, 100);
//设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
context.fillStyle = "rgba(255,0,0,0.2)";
context.strokeStyle = "rgba(255,0,0,0.2)";
context.fillRect(240,0 , 100, 100);
context.strokeRect(240, 120, 100, 100);
}
function draw22(id) {
var canvas = document.getElementById(id)
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//实践表明在不设施fillStyle下的默认fillStyle=black
context.fillRect(0, 0, 100, 100);
//实践表明在不设施strokeStyle下的默认strokeStyle=black
context.strokeRect(120, 0, 100, 100);
//设置纯色
context.fillStyle = "red";
context.strokeStyle = "blue";
context.fillRect(0, 120, 100, 100);
context.strokeRect(120, 120, 100, 100);
//设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
context.fillStyle = "rgba(255,0,0,0.2)";
context.strokeStyle = "rgba(255,0,0,0.2)";
context.fillRect(240, 0, 100, 100);
context.strokeRect(240, 120, 100, 100);
context.clearRect(50, 50, 240, 120);
}
function draw23(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext('2d');
var n = 0;
//左侧1/4圆弧
context.beginPath();
context.arc(100, 150, 50, 0, Math.PI/2 , false);
context.fillStyle = 'rgba(255,0,0,0.25)';
context.fill();
context.strokeStyle = 'rgba(255,0,0,0.25)'
context.closePath();
context.stroke();
//右侧1/4圆弧
context.beginPath();
context.arc(300, 150, 50, 0, Math.PI/2 , false);
context.fillStyle = 'rgba(255,0,0,0.25)';
context.fill();
context.strokeStyle = 'rgba(255,0,0,0.25)';
context.closePath();
context.stroke();
}
function draw0(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.beginPath();
context.arc(200, 150, 100, 0, Math.PI * 2, true);
//不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果
context.closePath();
context.fillStyle = 'rgba(0,255,0,0.25)';
context.fill();
}
function draw1(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.fillStyle = 'rgb(100,255,100)';
context.strokeStyle = 'rgb(0,0,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
for (var i = 0; i < 30; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
function draw2(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext("2d");
context.fillStyle = "#EEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.globalCompositeOperation = 'and';
context.fillStyle = 'rgb(100,255,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
context.moveTo(dx, dy);
for (var i = 0; i < 30; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
function draw24(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext("2d");
context.moveTo(50, 50);
context.bezierCurveTo(50, 50,150, 50, 150, 150);
context.stroke();
context.quadraticCurveTo(150, 250, 250, 250);
context.stroke();
}
function draw25(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createLinearGradient(0, 0, 0, 300);
g1.addColorStop(0, 'rgb(255,0,0)'); //红
g1.addColorStop(0.5, 'rgb(0,255,0)');//绿
g1.addColorStop(1, 'rgb(0,0,255)'); //蓝
//可以把lg对象理解成GDI中线性brush
context.fillStyle = g1;
//再用这个brush来画正方形
context.fillRect(0, 0, 400, 300);
}
function draw3(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createLinearGradient(0, 0, 0, 300);
g1.addColorStop(0,'rgb(255,255,0)');//浅绿
g1.addColorStop(1,'rgb(0,255,255)');//浅蓝
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);
var n = 0;
var g2 = context.createLinearGradient(0, 0, 300, 0);
g2.addColorStop(0, 'rgba(0,0,255,0.5)');//蓝色
g2.addColorStop(1, 'rgba(255,0,0,0.5)');//红色
for (var i = 0; i < 10; i++) {
context.beginPath();
context.fillStyle = g2;
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
}
function draw26(id) {
//同一个圆心画球型
/*var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100);
g1.addColorStop(0.1, 'rgb(255,0,0)');
g1.addColorStop(1, 'rgb(50,0,0)');
context.fillStyle = g1;
context.beginPath();
context.arc(200, 150, 100, 0, Math.PI * 2, true);
context.closePath();
context.fill();*/
//不同圆心看径向渐变模型
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 50);
g1.addColorStop(0.1, 'rgb(255,0,0)');
g1.addColorStop(0.5, 'rgb(0,255,0)');
g1.addColorStop(1, 'rgb(0,0,255)');
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);
}
function draw27(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur = 1.5;
context.fillStyle = 'rgba(255,0,0,0.5)';
context.fillRect(100, 100, 200, 100);
}
function draw4(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);
g1.addColorStop(0.1, 'rgb(255,255,0)');
g1.addColorStop(0.3, 'rgb(255,0,255)');
g1.addColorStop(1, 'rgb(0,255,255)');
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);
var n = 0;
// var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);
// g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');
// g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');
// g2.addColorStop(1, 'rgba(0,0,255,0.5)');
for (var i = 0; i < 10; i++) {
var g2 = context.createRadialGradient(i * 25, i * 25, 0, i * 25, i * 25, i * 10);
g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');
g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');
g2.addColorStop(1, 'rgba(0,0,255,0.5)');
context.beginPath();
context.fillStyle = g2;
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.fill();
}
}
function draw5(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.save(); //保存了当前context的状态
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.fillStyle = "rgba(255,0,0,0.1)";
//平移 缩放 旋转 1 2 3
context.translate(100, 100);
context.scale(0.5, 0.5);
context.rotate(Math.PI / 4);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态,保存恢复只能使用一次
context.save(); //保存了当前context的状态
context.fillStyle = "rgba(255,0,0,0.2)";
//平移 旋转 缩放 1 3 2
context.translate(100, 100);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态
context.save(); //保存了当前context的状态
context.fillStyle = "rgba(255,0,0,0.3)";
//缩放 平移 旋转 2 1 3
context.scale(0.5, 0.5);
context.translate(100, 100);
context.rotate(Math.PI / 4);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态
context.save(); //保存了当前context的状态
context.fillStyle = "rgba(255,0,0,0.4)";
//缩放 旋转 平移 2 3 1
context.scale(0.5, 0.5);
context.rotate(Math.PI / 4);
context.translate(100, 100);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态
context.save(); //保存了当前context的状态
context.fillStyle = "rgba(255,0,0,0.5)";
//旋转 平移 缩放 3 1 2
context.rotate(Math.PI / 4);
context.translate(100, 100);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态
context.save(); //保存了当前context的状态
context.fillStyle = "rgba(255,0,0,1)";
//旋转 缩放 平移 3 2 1
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.translate(100, 100);
context.fillRect(0, 0, 100, 100);
//实验表明应该移动的是坐标轴
//实验表明缩放的是坐标轴比例
//实验表明旋转的是坐标轴
//综合上述，因此平移 缩放 旋转 三者的顺序不同都将画出不同的结果
}
function draw6(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
//图形绘制
context.translate(200, 50);
context.fillStyle = 'rgba(255,0,0,0.25)';
for (var i = 0; i < 50; i++) {
//实验表明translate、scale、rotate都是在原有的context属性上调整的
context.translate(25, 25);
context.scale(0.95, 0.95);
context.rotate(Math.PI / 10);
context.fillRect(0, 0, 100, 50);
}
}
function draw7(id) {
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
//图形绘制
context.translate(200, 50);
for (var i = 0; i < 50; i++) {
context.translate(25, 25);
context.scale(0.95, 0.95);
context.rotate(Math.PI / 10);
create5Star(context);
context.fill();
}
}
function draw8(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//context.beginPath();
context.strokeStyle = "rgb(250,0,0)";
context.fillStyle = "rgb(250,0,0)"
//实验证明第一次lineTo的时候和moveTo功能一样
context.lineTo(100, 100);
//之后的lineTo会以上次lineTo的节点为开始
context.lineTo(200, 200);
context.lineTo(200, 100);
context.moveTo(200, 50);
context.lineTo(100,50);
context.stroke();
}
function draw9(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//定义颜色
var colors = ["red", "orange", "yellow", "green", "blue", "navy", "perple"];
//定义线宽
context.lineWidth = 10;
context.transform(1,0,0,1,100,0)
//循环绘制圆弧
for (var i = 0; i < colors.length; i++) {
//定义每次向下移动10个像素的变换矩阵
context.transform(1, 0, 0, 1, 0, 10);
//设定颜色
context.strokeStyle = colors[i];
context.beginPath();
context.arc(50, 100, 100, 0, Math.PI, true);
context.stroke();
}
}
function draw10(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext("2d");
var oprtns = new Array(
"source-over",
"destination-over",
"source-in",
"destination-in",
"source-out",
"destination-out",
"source-atop",
"destination-atop",
"lighter",
"xor",
"copy"
);
var i = 0;//组合效果编号
//结合setinterval动态显示组合
var interal = setInterval(function () {
if (i == 10) {
i=0;
}
else {
i++;
}
//每次重绘前清空
context.clearRect(0,0,400,300)
//蓝色矩形
context.fillStyle = "blue";
context.fillRect(10, 10, 60, 60);
//设置组合方式
context.globalCompositeOperation = oprtns[i];
//设置新图形（红色圆形）
context.beginPath();
context.fillStyle = "red";
context.arc(60, 60, 30, 0, Math.PI * 2, false);
context.fill();
}, 1000);
}
function create5Star(context) {
var n = 0;
var dx = 100;
var dy = 0;
var s = 50;
//创建路径
context.beginPath();
context.fillStyle = 'rgba(255,0,0,0.5)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for (var i = 0; i < 5; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath();
}
function draw11(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur =5;
//图形绘制
context.translate(0, 50);
for (var i = 0; i < 3; i++) {
context.translate(50, 50);
create5Star(context);
context.fill();
}
}
//drawImage(image,x,y)
function draw28(id) {
var image = new Image();
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
image.onload = function () {
context.drawImage(image,0,0);
}
}
//drawImage(image,x,y,w,h)
function draw12(id) {
var image = new Image();
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
image.onload = function () {
context.drawImage(image, 50, 50, 300, 200);
}
}
//drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
function draw13(id){
var image = new Image();
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
image.onload = function () {
context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//这里取的是实际尺寸
}
}
function draw14(id) {
//传统的平铺是用for循环来处理的，现在直接调用接口
var image = new Image();
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
var type = ["no-repeat", "repeat-x", "repeat-y", "repeat"];
var i = 0;
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
image.onload = function () {
var interval = setInterval(function () {
//每次转换平铺类型清空
context.clearRect(0, 0, 400, 300);
if (i >= 4) {
i = 0;
}
var ptrn = context.createPattern(image, type[i]);
context.fillStyle = ptrn;
context.fillRect(0, 0, 400, 300);
i++;
}, 1000);
};
}
//图像裁剪
function draw15(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "black";
context.fillRect(0, 0, 400, 300);
image = new Image();
image.onload = function () {
drawImg(context,image);
}
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"
}
function drawImg(context, image) {
//圆形裁剪区
//createCircleClip(context)
//星形裁剪区
create5StarClip(context);
context.drawImage(image,0,0);
}
function createCircleClip(context) {
context.beginPath();
context.arc(200, 150, 100, 0, Math.PI * 2, true);
context.closePath();
context.clip();
}
function create5StarClip(context) {
var n = 0;
var dx = 200;
var dy = 135;
var s = 150;
context.beginPath();
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for (var i = 0; i < 5; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath();
context.clip();
}
function draw16(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = 'red'
//在右下角画一个正方形
context.fillRect(250,250,150,50);
var image = new Image();
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
image.onload = function () {
//在左上角画一幅图片
context.drawImage(image, 0, 0,200,200);
//实验证明imagedata取的是canvas所在范围画的图形，不止是图片
//不会取该区域内是空白的canvas的像素
var imagedata = context.getImageData(0, 0, 400, 300);
//修改imagedata
for (var i = 0, n = imagedata.data.length; i < n; i += 4) {
imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red;
imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green
imagedata.data[i + 2] = 255 - imagedata.data[i + 2]; //blue
//imagedata.data[i + 3] = 255 - imagedata.data[i + 3]; //a
}
context.putImageData(imagedata,0 ,0,100,100,300,200);
}
}
function draw17(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0,0,400,300);
context.fillStyle = "#00f";
context.font = "italic 30px sans-serif";
context.textBaseline = 'top';
//填充字符串
var txt="fill示例文字"
context.fillText(txt, 0, 0);
var length=context.measureText(txt);
context.fillText("长" + length.width + "px", 0, 50);
context.font = "bolid 30px sans-serif";
txt = "stroke示例文字";
length = context.measureText(txt);
context.strokeText(txt,0,100);
context.fillText("长" + length.width + "px", 0, 150);
}
function draw18(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.save(); //保存了当前context的状态
context.fillStyle = "black";
context.fillRect(0, 0, 100, 100);
context.restore();//恢复到刚刚保存的状态
context.fillRect(0,120,100,100);
}
function draw19(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0,0,225)";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(255,255,0)";
context.fillRect(10, 20, 50, 50);
//把图像保存到新的窗口
var w=window.open(canvas.toDataURL("http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"),"smallwin","width=400,height=350");
}
function draw20(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
var interal = setInterval(function () {
move(context);
}, 1);
}
var x = 100;//矩形开始坐标
var y = 100;//矩形结束坐标
var mx = 0;//0右1左
var my = 0; //0下1上
var ml = 1;//每次移动长度
var w = 20;//矩形宽度
var h = 20;//矩形高度
var cw = 400;//canvas宽度
var ch = 300; //canvas高度
function move(context) {
context.clearRect(0, 0, 400, 300);
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.fillStyle = "red";
context.fillRect(x, y, w, h);
if (mx == 0) {
x = x + ml;
if (x >= cw-w) {
mx = 1;
}
}
else {
x = x - ml;
if (x <= 0) {
mx = 0;
}
}
if (my == 0) {
y = y + ml;
if (y >= ch-h) {
my = 1;
}
}
else {
y = y - ml;
if (y <= 0) {
my = 0;
}
}
}
window.onload = function () {
draw21("canvas21");
draw22("canvas22");
draw23("canvas23");
draw24("canvas24");
draw25("canvas25");
draw26("canvas26");
draw27("canvas27");
draw28("canvas28");
draw0("canvas0");
draw1("canvas1");
draw2("canvas2");
draw3("canvas3");
draw4("canvas4");
draw5("canvas5");
draw6("canvas6");
draw8("canvas8");
draw7("canvas7");
draw9("canvas9");
draw10("canvas10");
draw11("canvas11");
draw12("canvas12");
draw13("canvas13");
draw14("canvas14");
draw15("canvas15");
draw16("canvas16");
draw17("canvas17");
draw18("canvas18");
draw19("canvas19");
draw20("canvas20");
}
</script>
</head>
<body>
<section><header><h1>画矩形</h1></header><canvas id="canvas21" width="400" height="300"></canvas></section>
<section><header><h1>清除矩形</h1></header><canvas id="canvas22" width="400" height="300"></canvas></section>
<section><header><h1>绘制路径</h1></header><canvas id="canvas23" width="400" height="300"></canvas></section>
<section><header><h1>画圆()</h1></header><canvas id="canvas0" width="400" height="300"></canvas></section>
<section><header><h1>画线test(lineTo moveTo)</h1></header><canvas id="canvas8" width="400" height="300"></canvas></section>
<section><header><h1>画线demo(lineTo moveTo)</h1></header><canvas id="canvas1" width="400" height="300"></canvas></section>
<section><header><h1>贝塞尔曲线test（bezierCurveTo）</h1></header><canvas id="canvas24" width="400" height="300"></canvas></section>
<section><header><h1>贝塞尔曲线demo（bezierCurveTo）</h1></header><canvas id="canvas2" width="400" height="300"></canvas></section>
<section><header><h1>线性test（createLinearGradient addColorStop）</h1></header><canvas id="canvas25" width="400" height="300"></canvas></section>
<section><header><h1>线性demo（createLinearGradient addColorStop）</h1></header><canvas id="canvas3" width="400" height="300"></canvas></section>
<section><header><h1>发散test（createRadialGradient）</h1></header><canvas id="canvas26" width="400" height="300"></canvas></section>
<section><header><h1>发散demo（createRadialGradient）</h1></header><canvas id="canvas4" width="400" height="300"></canvas></section>
<section><header><h1>平移 test（translate）缩放（scale） 旋转（rotate）</h1></header><canvas id="canvas5" width="400" height="300"></canvas></section>
<section><header><h1>平移 demo（translate）缩放（scale） 旋转（rotate）</h1></header><canvas id="canvas6" width="400" height="300"></canvas></section>
<section><header><h1>坐标与路径的结合使用</h1></header><canvas id="canvas7" width="400" height="300"></canvas></section>
<section><header><h1>矩阵变换</h1></header><canvas id="canvas9" width="400" height="300"></canvas></section>
<section><header><h1>图形组合叠加(globalCompositeOperation)</h1></header><canvas id="canvas10" width="400" height="300"></canvas></section>
<section><header><h1>给图像绘制阴影test shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor（阴影的颜色） shadowBlur（阴影的模糊范围）</h1></header><canvas id="canvas27" width="400" height="300"></canvas></section>
<section><header><h1>给图像绘制阴影demo shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor（阴影的颜色） shadowBlur（阴影的模糊范围）</h1></header><canvas id="canvas11" width="400" height="300"></canvas></section>
<section><header><h1>绘制图像drawImage(image,x,y)</h1></header><canvas id="canvas28" width="400" height="300"></canvas></section>
<section><header><h1>绘制图像drawImage(image,x,y,w,h)</h1></header><canvas id="canvas12" width="400" height="300"></canvas></section>
<section><header><h1>绘制局部图像drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)</h1></header><canvas id="canvas13" width="400" height="300"></canvas></section>
<section><header><h1>图像平铺</h1></header><canvas id="canvas14" width="400" height="300"></canvas></section>
<section><header><h1>图像裁剪clip</h1></header><canvas id="canvas15" width="400" height="300"></canvas></section>
<section><header><h1>像素处理getImageData</h1></header><canvas id="canvas16" width="400" height="300"></canvas></section>
<section><header><h1>绘制文字fillText strokeText</h1></header><canvas id="canvas17" width="400" height="300"></canvas></section>
<section><header><h1>绘图状态的保存save与恢复restore</h1></header><canvas id="canvas18" width="400" height="300"></canvas></section>
<section><header><h1>保存文件canvas.toDataURL</h1></header><canvas id="canvas19" width="400" height="300"></canvas></section>
<section><header><h1>简单动画</h1></header><canvas id="canvas20" width="400" height="300"></canvas></section>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
# html5
# canvas
# JQuery和HTML5 Canvas实现弹幕效果
# javascript+HTML5 Canvas绘制转盘抽奖
# javascript html5 canvas实现可拖动省份的中国地图
# JavaScript+html5 canvas实现本地截图教程
# JavaScript html5 canvas画布中删除一个块区域的方法
# 利用HTML5的画布Canvas实现刮刮卡效果
# js+html5实现canvas绘制简单矩形的方法
# js+html5实现canvas绘制镂空字体文本的方法
# js+html5通过canvas指定开始和结束点绘制线条的方法
# js+HTML5实现canvas多种颜色渐变效果的方法
# 的是
# 存了
# 平铺
# 清空
# 塞尔
# 越低
# 画一
# 都是
# 画线
# 都将
# 再用
# 多说
# 可以利用
# 会以
# 画出
# 意想不到
# 到新
# 保存文件
# 直接调用
# 在原有
相关文章：
整人网站在线制作软件,整蛊网站退不出去必须要打我是白痴才能出去？
如何选择建站程序？包含哪些必备功能与类型？
番禺网站制作公司哪家值得合作,番禺图书馆新馆开放了吗？
电商网站制作价格怎么算,网上拍卖流程以及规则？
网页设计与网站制作内容,怎样注册网站？
青浦网站制作公司有哪些,苹果官网发货地是哪里？
湖南网站制作公司,湖南上善若水科技有限公司做什么的？
Python lxml的etree和ElementTree有什么区别
如何零基础开发自助建站系统？完整教程解析
建站之星后台搭建步骤解析：模板选择与产品管理实操指南
建站之星免费版是否永久可用？
C++用Dijkstra(迪杰斯特拉)算法求最短路径
股票网站制作软件,网上股票怎么开户？
免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？
国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？
Dapper的Execute方法的返回值是什么意思 Dapper Execute返回值详解
如何零成本快速生成个人自助网站？
建站之星价格显示格式升级，你的预算足够吗？
如何通过主机屋免费建站教程十分钟搭建网站？
清除minerd进程的简单方法
外贸公司网站制作,外贸网站建设一般有哪些步骤？
广东专业制作网站有哪些,广东省能源集团有限公司官网？
网站制作模板下载什么软件,ppt模板免费下载网站？
宝塔Windows建站如何避免显示默认IIS页面？
,网站推广常用方法？
如何通过智能用户系统一键生成高效建站方案？
常州企业网站制作公司,全国继续教育网怎么登录？
如何在搬瓦工VPS快速搭建网站？
临沂网站制作企业,临沂第三中学官方网站？
怎么将XML数据可视化 D3.js加载XML
武汉网站如何制作,黄黄高铁武穴北站途经哪些村庄？
活动邀请函制作网站有哪些,活动邀请函文案？
网站图片在线制作软件,怎么在图片上做链接？
,如何利用word制作宣传手册？
网站制作报价单模板图片,小松挖机官方网站报价？
企业网站制作费用多少,企业网站空间一般需要多大，费用是多少？
定制建站模板如何实现SEO优化与智能系统配置？18字教程
网站建设设计制作营销公司南阳,如何策划设计和建设网站？
建站主机是什么？如何选择适合的建站主机？
建站之星手机一键生成：多端自适应+小程序开发快速建站指南
如何用wdcp快速搭建高效网站？
建站主机选哪家性价比最高？
制作网页的网站有哪些,电脑上怎么做网页？
建站之星安装后界面空白如何解决？
学校为何禁止电信移动建设网站？
如何确认建站备案号应放置的具体位置？
如何快速选择适合个人网站的云服务器配置？
,有什么在线背英语单词效率比较高的网站？
网站制作话术技巧,网站推广做的好怎么话术？
如何撰写建站申请书？关键要点有哪些？
*请认真填写需求信息，我们会在24小时内与您取得联系。
