html5 canvas表单,html5 canvas 详细使用教程

最新推荐文章于 2022-04-27 22:05:38 发布
最新推荐文章于 2022-04-27 22:05:38 发布
阅读量432 收藏
点赞数
文章标签： html5 canvas表单

>

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");

}

画矩形

清除矩形

绘制路径

画圆()

画线test(lineTo moveTo)

画线demo(lineTo moveTo)

贝塞尔曲线test(bezierCurveTo)

贝塞尔曲线demo(bezierCurveTo)

线性test(createLinearGradient addColorStop)

线性demo(createLinearGradient addColorStop)

发散test(createRadialGradient)

发散demo(createRadialGradient)

平移 test(translate)缩放(scale) 旋转(rotate)

平移 demo(translate)缩放(scale) 旋转(rotate)

坐标与路径的结合使用

矩阵变换

图形组合叠加(globalCompositeOperation)

给图像绘制阴影test shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor(阴影的颜色) shadowBlur(阴影的模糊范围)

给图像绘制阴影demo shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor(阴影的颜色) shadowBlur(阴影的模糊范围)

绘制图像drawImage(image,x,y)

绘制图像drawImage(image,x,y,w,h)

绘制局部图像drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

图像平铺

图像裁剪clip

像素处理getImageData

绘制文字fillText strokeText

绘图状态的保存save与恢复restore

保存文件canvas.toDataURL

简单动画

失眠数羊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【AntV】canvas表格s2完全封装手册
不忘初心，坚定道路！
08-31 1296
由于我们业务中有很多地方需要有纵向复制，刷选等操作，一般的传统表格并不支持。目前支持度较好的葡萄城表格与handsontable都需要收费，而s2作为一款轻量级开源表单较为符合我们的需求，但是由于s2仍然不够成熟，有非常多的功能需要自定义。我在公司对s2做了大量封装，对里面代码基本上算比较熟悉了。本篇结合我们业务中的需求，带大家看看s2可以做到什么地步，需要进行怎样的改动。本文写了s2常见的封装功能，目前暂时写这么多，以后有新的再补充。
HOW - Canvas 入门系列之表格绘制工具（二）
weixin_58540586的博客
04-10 1323
通过这个系列，我们将学习 canvas 的基本内容，并且通过两个案例实现，即一个表格绘制工具（其支持表格数据渲染），一个画图工具（其支持常见图形绘制，以及撤销和恢复等功能），来掌握基于 canvas 的复杂交互实现。今天我们首先实现一个表格绘制工具。
canvas制作简单表格
block_xu的博客
12-31 2738
初识canvas，绘制简单表格 目的，制作一个可以点击的表格 想法： 以每一个小盒子按一定大小排列组成表格，格子的线段采用从顶到底、从左到右的方式绘制整个表格的格子，点击事件以点击时的offsetXY在json中找到对应的值显示（暂时不知道这样写正不正确） json数据 var data = [ { name: "改动", number1: 53, ...
html 脚本 gdi,基于gdi的简单画图
weixin_39528289的博客
06-27 166
画图软件资源下载此资源下载价格为2D币，请先登录资源文件列表gdl/.gitattributes,2581gdl/.gitignore,3997gdl/.git/config,647gdl/.git/description,73gdl/.git/HEAD,23gdl/.git/hooks/README.sample,177gdl/.git/index,1168gdl/....
CSS第二章：2.颜色单位（RGB值、RGBA值）
热门推荐
要思考，要努力
04-27 1万+
总览一、RGB1.CSS中能够使用颜色名来使用颜色2.不使用颜色名，我们使用RGB值来描述颜色3.R -red G -green B-blue4.每一种颜色的范围在0~255（0%~100%）之间 5.因此 RGB 能够表示 255x255x255 种颜色 二、RGBA 1.添加的一个a参数，负责调节透明度 2.a的值 取值范围为 0 ~ 1 3.0表示完全透明，1表示完全不透明 一、RGB · 实操 1.HTML代码： 2.CSS代码： 3.显示效果： 4.RGB · 特殊值 1.rgb（
html5 canvas 隐藏边框,HTML5 Canvas 绘图
weixin_42253260的博客
06-03 901
HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。1、使用Canvas绘制直线：XML/HTML Code复制内容到剪贴板html>canvas{border:dashed2px#CCC}function$$(id)...
HTML5 canvas绘图
粥要熬。
09-09 482
canvas绘制图形canvas元素的基础知识在页面上放置一个canvas元素，就相当于在页面放置了一块画布，可以在其中描绘图形。事实上，canvas元素只是一个无色透明的区域，需要利用JavaScript编写在其中进行绘画的脚本。在页面放置canvas元素首先要指定的是ID、width、height三个属性<canvas id="canvas" width="400" height="300" /
html5 canvas点击刷新验证码提交表单
11-06
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行图形绘制，从而创建出丰富的动态交互体验。在本话题中，我们将探讨如何利用HTML5 Canvas实现点击刷新验证码并将其与表单提交功能结合。 验证码的...
HTML5 canvas圆形百分比进度条动画特效代码
03-20
HTML5的canvas元素是网页开发中的一个强大工具，它提供了在浏览器端进行图形绘制的能力，无需依赖任何插件。在给定的“HTML5 canvas圆形百分比进度条动画特效代码”中，我们可以深入探讨如何利用canvas实现动态的、...
HTML5 Canvas签名画板功能特效代码
03-20
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。"HTML5 Canvas签名画板功能特效代码"是一个利用Canvas API实现的签名和绘画应用，具备多种实用功能，...
使用Canvas和JavascriptHTML游戏
04-07
在压缩包中的“HTML-Game-using-Canvas-and-Javascript.pdf”文件可能包含了详细教程，讲解了如何结合HTML5 Canvas和JavaScript创建游戏的步骤，包括设置Canvas元素、画布的基本绘图方法、事件监听、游戏循环和碰撞...
html5 canvas 视频网站文字弹幕动画特效
11-05
在这个特定的场景中，我们讨论的是如何使用HTML5 Canvas实现视频网站的文字弹幕动画特效。 首先，我们要理解“弹幕”这个概念。弹幕源自日本的弹幕视频分享网站，是指用户在观看视频时发送的文字评论，这些评论以...
canvas绘制表格
qq_37805832的博客
03-17 4181
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0px;margin: 0px;} canvas{ display: block; margin: 0px auto; background-color
bubble html5,利用HTML5 Canvas创建交互式Bubble Chart
weixin_39640203的博客
06-27 138
Josh Marinacci也在其博客中详细地介绍了“如何利用HTML5 Canvas创建可以在移动桌面上运行的交互式图表以及如何利用真实数据填充图表。”下面让我们跟随作者学习如何创建我们自己的Bubble Chart。准备工作：需要知识：媒介HTML和JavaScript需求：文本编辑器和现代浏览器关于Bubble ChartBubble Chart就和它听起来一样是由气泡组成的图表，气泡实际...
canvas画布+form表单部分属性
u011933615的专栏
03-16 3760
本周学习知识点： 一、HTML5 Canvas画布     1. Canvas画布介绍     2. 绘制线段、虚线     3. 绘制矩形     4. 绘制圆形、圆角     5. 绘制图像、平铺     6. 绘制文字     7. 绘制渐变图形     8. 绘制视频 二、HTML5的智能表单   三、图像截取   四、动画效果     一、HTML5 C
canvas学习之渐变---createRadialGradient
昨天丶今天丶明天的的博客
08-14 6818
在canva0s画出的矩形, 圆形, 线条, 文本等的各种形状中，可以使用渐变来对各种形状的填充颜色进行一定程度上的颜色渐变效果，实现效果如下图所示 createRadialGradient(x,y,r,x1,y1,r1) - 创建(圆形)梯度渐变 addColorStop(index,color)方法指定颜色停止，参数使用index来描述，index范围在0-1之间，0.5即给定横纵...
css3.0抢先看(七)：HSL和HSLA,RGBA全新的定义颜色方法
haozit146的专栏www.css3s.cn
02-11 2443
文章来自www.css3s.cn 象十六进制和RGB定义颜色一样，css3还支持HSL（色调，饱和度，亮度）的定义方式。既然采用hsl的方式，那就应该有三个参数值：hue(色调)：0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其他颜色。Saturation（饱和度）：取值为0%到100%之间的值。Lightness（亮度）：取值为0%到100%之间的
HTML5简明教程-1.1.5.HTML5Canvas参考手册 之 放射渐变 createRadialGradient
lufaxinT
01-07 2735
创建放射渐变的方法是createRadialGradient()。与线性渐变相同，用createRadialGradient()方法可以创建基于画布的线性渐变，创建好的线性渐变可以用于填充路径、定义笔触等。
四台服务器分别部署组件内容.md
最新发布
07-24
四台服务器分别部署组件内容.md
深入探索HTML5 Canvas技术
本资源详细介绍了HTML5 Canvas的基础知识及其应用，旨在帮助读者全面理解HTML5。 在第一章“Introducing HTML5”中，作者首先回顾了HTML的历史，解释了HTML是如何从早期的静态页面语言发展到支持丰富媒体和交互性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值