分享HTML5 canvas 的总结
2024-04-24 06:15:12
下面我贴出的是对 canvas 的一份总结
便于平时翻阅以及参考
canvas参考
<html><head><title>Canvas tutorial</title><script type="text/javascript">function draw(){var canvas = document.getElementById('tutorial');if (canvas.getContext){var ctx = canvas.getContext('2d');/* fillStyle 填充颜色 fillRect 绘制填充的矩形 ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50);*/
/* fillRect 绘制填充的矩形 clearRect 绘制一个矩形的轮廓 strokeRect 清除指定区域,并使其完全透明 ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50);*/
/* beginPath 创建一个路径 moveTo 起点坐标 lineTo 目标坐标 fill 填充实心图形 ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.fill();*/
/* beginPath 创建一个路径 moveTo 起点坐标 arc 画弧或圆
arc(x, y, radius, startAngle, endAngle, anticlockwise) x, y 描述弧的圆形的圆心的坐标。 radius 描述弧的圆形的半径。 startAngle 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。 endAngle 沿着 X 轴正半轴的三点钟方向的角度为 0,角度沿着逆时针方向而增加。 counterclockwise 弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。
ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke();*/
/* for (i=0;i<4;i++){ for(j=0;j<3;j++){ //chinese_xu 原始代码 ctx.beginPath(); var x = 25+j*50; // x coordinate var y = 25+i*50; // y coordinate var radius = 20; // Arc radius var startAngle = 0; // Starting point on circle var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle ---//修复错误标点 var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
if (i>1){ ctx.fill(); } else { ctx.stroke(); } } } //chinese_xu 原始代码并没有按照1/4圆递增来画。 //修改后输出4行4列,要把画布扩大到200*200观看 for (i=0;i<4;i++){ for(j=0;j<4;j++){ ctx.beginPath(); var x = 25+j*50; // x coordinate var y = 25+i*50; // y coordinate var radius = 20; // Arc radius var startAngle = 0; // Starting point on circle var endAngle = Math.PI*(2-j/2); // End point on circle var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
if (i>1){ ctx.fill(); } else { ctx.stroke(); } } }*/
/* quadraticCurveTo 二次方曲线
quadraticCurveTo(cp1x, cp1y, x, y) // BROKEN in Firefox 1.5 (see work around below)
x , y 是终点坐标 cp1x , cp1y 是第一个控制点的坐标 cp2x , cp2y 是第二个控制点的坐标
ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke();*/
/* bezierCurveTo 贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
x , y 是终点坐标 cp1x , cp1y 是第一个控制点的坐标 cp2x , cp2y 是第二个控制点的坐标
ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill();*/
/* an example, need to use function of roundedRect // Draw shapes roundedRect(ctx,12,12,150,150,15); roundedRect(ctx,19,19,150,150,9); roundedRect(ctx,53,53,49,33,10); roundedRect(ctx,53,119,49,16,6); roundedRect(ctx,135,53,49,33,10); roundedRect(ctx,135,119,25,49,10);
// Character 1 ctx.beginPath(); ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); ctx.lineTo(34,37); ctx.fill();
// blocks for(i=0;i<8;i++){ ctx.fillRect(51+i*16,35,4,4); } for(i=0;i<6;i++){ ctx.fillRect(115,51+i*16,4,4); } for(i=0;i<8;i++){ ctx.fillRect(51+i*16,99,4,4); }
// character 2 ctx.beginPath(); ctx.moveTo(83,116); ctx.lineTo(83,102); ctx.bezierCurveTo(83,94,89,88,97,88); ctx.bezierCurveTo(105,88,111,94,111,102); ctx.lineTo(111,116); ctx.lineTo(106.333,111.333); ctx.lineTo(101.666,116); ctx.lineTo(97,111.333); ctx.lineTo(92.333,116); ctx.lineTo(87.666,111.333); ctx.lineTo(83,116); ctx.fill(); ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo(91,96); ctx.bezierCurveTo(88,96,87,99,87,101); ctx.bezierCurveTo(87,103,88,106,91,106); ctx.bezierCurveTo(94,106,95,103,95,101); ctx.bezierCurveTo(95,99,94,96,91,96); ctx.moveTo(103,96); ctx.bezierCurveTo(100,96,99,99,99,101); ctx.bezierCurveTo(99,103,100,106,103,106); ctx.bezierCurveTo(106,106,107,103,107,101); ctx.bezierCurveTo(107,99,106,96,103,96); ctx.fill(); ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(101,102,2,0,Math.PI*2,true); ctx.fill(); ctx.beginPath(); ctx.arc(89,102,2,0,Math.PI*2,true); ctx.fill();*/
/* drawImage 引入图像
drawImage(image, x, y) image 是 image 或者 canvas 对象 x , y 是其在目标 canvas 里的起始坐标
var img = new Image(); img.src = '../images/backdrop.png'; img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); }*/
/* drawImage 缩放图像 drawImage(image, x, y, width, height) image 是 image 或者 canvas 对象 x , y 是其在目标 canvas 里的起始坐标 width , height 分别是图像在 canvas 中显示大小
var img = new Image(); img.src = '../images/rhino.jpg'; img.onload = function(){ for (i=0;i<2;i++){ for (j=0;j<3;j++){ ctx.drawImage(img,j*100,i*76,100,76); } } }*/
/* drawImage 切片效果 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) image 是 image 或者 canvas 对象 sx , sy 被切图片的起始位置 sWidth , sHeight 被切图片的宽,高 dx , dy 被切图片的显示起始位置 sWidth , sHeight 被切图片的显示宽,高
var img1 = new Image(); img1.src = '../images/rhino.jpg'; ctx.drawImage(img1,33,71,104,124,21,20,87,104); var img2 = new Image(); img2.src = '../images/picture_frame.png'; ctx.drawImage(img2,0,0);*/
/* 画廊的例子暂未加入 可参考 https://developer.mozilla.org/cn/Canvas_tutorial%3AUsing_images*/
/* fillStyle 设置颜色 for (var i=0;i<6;i++){ for (var j=0;j<12;j++){ ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + Math.floor(255-21.25*j) + ',0)'; ctx.fillRect(j*25,i*25,25,25); } } */
/* strokeStyle 设置颜色 for (var i=0;i<6;i++){ for (var j=0;j<12;j++){ ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + Math.floor(255-21.25*j) + ')'; ctx.beginPath(); ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true); ctx.stroke(); } } */
/* 透明度 globalAlpha 0~1 example1
// draw background ctx.fillStyle = '#FD0'; ctx.fillRect(0,0,75,75); ctx.fillStyle = '#6C0'; ctx.fillRect(75,0,75,75); ctx.fillStyle = '#09F'; ctx.fillRect(0,75,75,75); ctx.fillStyle = '#F30'; ctx.fillRect(75,75,75,75); ctx.fillStyle = '#FFF';
// set transparency value ctx.globalAlpha = 0.2;
// Draw semi transparent circles for (var i=0;i<7;i++){ ctx.beginPath(); ctx.arc(75,75,10+10*i,0,Math.PI*2,true); ctx.fill(); } */
/* 透明度 globalAlpha 0~1 example2
// draw background ctx.fillStyle = 'rgb(255,221,0)'; ctx.fillRect(0,0,150,37.5); ctx.fillStyle = 'rgb(102,204,0)'; ctx.fillRect(0,37.5,150,37.5); ctx.fillStyle = 'rgb(0,153,255)'; ctx.fillRect(0,75,150,37.5); ctx.fillStyle = 'rgb(255,51,0)'; ctx.fillRect(0,112.5,150,37.5);
// Draw semi transparent circles for (var i=0;i<10;i++){ ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')'; for (var j=0;j<4;j++){ ctx.fillRect(5+i*14,5+j*37.5,14,27.5) } }*/
/* lineWidth 设置线条的宽度 for (var i = 0; i < 13; i++){ ctx.lineWidth = 1+i; ctx.beginPath(); ctx.moveTo(5+i*14,5); ctx.lineTo(5+i*14,140); ctx.stroke(); } */
/* lineCap 线段端点显示的样子 butt 默认值,平端,无延伸 round 圆头,伸出以直线宽度为直径的半圆 square 平端,延伸半个直线的宽度
var lineCap = ['butt','round','square']; // Draw guides ctx.strokeStyle = '#09f'; ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(140,10); ctx.moveTo(10,140); ctx.lineTo(140,140); ctx.stroke();
// Draw lines ctx.strokeStyle = 'black'; for (var i=0;i<lineCap.length;i++){ ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); ctx.moveTo(25+i*50,10); ctx.lineTo(25+i*50,140); ctx.stroke(); } */
/* lineJoin 2段线段连接处的样子 round 圆头连接 bevel 平头链接 miter 默认值,剪头连接
var lineJoin = ['round','bevel','miter']; ctx.lineWidth = 10; for (i=0;i<lineJoin.length;i++){ ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(-5,5+i*40); ctx.lineTo(35,45+i*40); ctx.lineTo(75,5+i*40); ctx.lineTo(115,45+i*40); ctx.lineTo(155,5+i*40); ctx.stroke(); }*/
/* miterLimit 用来设定外延交点与连接点的最大距离,如果交点距离大于此值,连接效果会变成了 bevel 详情参考 https://developer.mozilla.org/cn/Canvas_tutorial/Applying_styles_and_colors*/
/* 线性渐变 createLinearGradient(x1,y1,x2,y2) 渐变的起点 (x1,y1) 与终点 (x2,y2)
var lingrad = ctx.createLinearGradient(0,0,0,150); lingrad.addColorStop(0, '#00ABEB'); lingrad.addColorStop(0.5, '#fff'); lingrad.addColorStop(0.5, '#26C000'); lingrad.addColorStop(1, '#fff');
var lingrad2 = ctx.createLinearGradient(0,50,0,95); lingrad2.addColorStop(0.5, '#000'); lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
// assign gradients to fill and stroke styles ctx.fillStyle = lingrad; ctx.strokeStyle = lingrad2;
// draw shapes ctx.fillRect(10,10,130,130); ctx.strokeRect(50,50,50,50); */
/* 圆形渐变 createRadialGradient(x1,y1,r1,x2,y2,r2) 前三个定义一个以 (x1,y1) 为原点,半径为 r1 的圆,后三个参数则定义另一个以 (x2,y2) 为原点,半径为 r2 的圆
// Create gradients var radgrad = ctx.createRadialGradient(45,45,10,52,50,30); radgrad.addColorStop(0, '#A7D30C'); radgrad.addColorStop(0.9, '#019F62'); radgrad.addColorStop(1, 'rgba(1,159,98,0)');
var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50); radgrad2.addColorStop(0, '#FF5F98'); radgrad2.addColorStop(0.75, '#FF0188'); radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40); radgrad3.addColorStop(0, '#00C9FF'); radgrad3.addColorStop(0.8, '#00B5E2'); radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90); radgrad4.addColorStop(0, '#F4F201'); radgrad4.addColorStop(0.8, '#E4C700'); radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
// draw shapes ctx.fillStyle = radgrad4; ctx.fillRect(0,0,150,150); ctx.fillStyle = radgrad3; ctx.fillRect(0,0,150,150); ctx.fillStyle = radgrad2; ctx.fillRect(0,0,150,150); ctx.fillStyle = radgrad; ctx.fillRect(0,0,150,150);*/
/* 等效于循环实现图案 createPattern(image,type) Image 可以是一个 Image 对象的引用, 或者另一个 canvas 对象 Type 必须是下面的字符串值之一: repeat,repeat-x,repeat-y 和 no-repeat
// create new image object to use as pattern var img = new Image(); img.src = '../images/backdrop.png'; img.onload = function(){
// create pattern var ptrn = ctx.createPattern(img,'repeat'); ctx.fillStyle = ptrn; ctx.fillRect(0,0,150,150); } */
/* 阴影 shadowOffsetX = float shadowOffsetY = float shadowBlur = float shadowColor = color shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的 负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,他们默认都是 0 shadowBlur 用于设定阴影的模糊程度,默认为 0 shadowColor 用于设定阴影效果的延伸,值可以是标准的 CSS 颜色值,默认是全透明的黑色
ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman"; ctx.fillStyle = "Black"; ctx.fillText("Sample String", 5, 30); */
/* save() 和 restore() 用来保存和恢复 canvas 状态的 Canvas 状态是以堆(stack)的方式保存的,每一次调用 save 方法,当前的状态就会被推入堆中保存起来 每一次调用 restore 方法,上一个保存的状态就从堆中弹出,所有设定都恢复
ctx.fillRect(0,0,150,150); // Draw a rectangle with default settings ctx.save(); // Save the default state
ctx.fillStyle = '#09F' // Make changes to the settings ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings
ctx.save(); // Save the current state ctx.fillStyle = '#FFF' // Make changes to the settings ctx.globalAlpha = 0.5; ctx.fillRect(30,30,90,90); // Draw a rectangle with new settings
ctx.restore(); // Restore previous state ctx.fillRect(45,45,60,60); // Draw a rectangle with restored settings
ctx.restore(); // Restore original state ctx.fillRect(60,60,30,30); // Draw a rectangle with restored settings */
/* 位移 translate(x, y) x 是左右偏移量 y 是上下偏移量
ctx.fillRect(0,0,300,300); for (var i=0;i<3;i++) { for (var j=0;j<3;j++) { ctx.save(); ctx.strokeStyle = "#9CFF00"; ctx.translate(50+j*100,50+i*100); drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10); ctx.restore(); } } */
/* 旋转 rotate(angle) angle 旋转的角度,它是顺时针方向的,以弧度为单位的值
ctx.translate(75,75); for (var i=1;i<6;i++){ // Loop through rings (from inside to out) ctx.save(); ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
for (var j=0;j<i*6;j++){ // draw individual dots ctx.rotate(Math.PI*2/(i*6)); ctx.beginPath(); ctx.arc(0,i*12.5,5,0,Math.PI*2,true); ctx.fill(); } ctx.restore(); } */
/* 缩放 scale(x, y) x,y 分别是横轴和纵轴的缩放因子,它们都必须是正值 值比 1.0 小表示缩小,比 1.0 大则表示放大
ctx.strokeStyle = "#fc0"; ctx.lineWidth = 1.5; ctx.fillRect(0,0,300,300);
// Uniform scaling ctx.save() ctx.translate(50,50); drawSpirograph(ctx,22,6,5); // no scaling
ctx.translate(100,0); ctx.scale(0.75,0.75); drawSpirograph(ctx,22,6,5);
ctx.translate(133.333,0); ctx.scale(0.75,0.75); drawSpirograph(ctx,22,6,5); ctx.restore();
// Non-uniform scaling (y direction) ctx.strokeStyle = "#0cf"; ctx.save() ctx.translate(50,150); ctx.scale(1,0.75); drawSpirograph(ctx,22,6,5);
ctx.translate(100,0); ctx.scale(1,0.75); drawSpirograph(ctx,22,6,5);
ctx.translate(100,0); ctx.scale(1,0.75); drawSpirograph(ctx,22,6,5); ctx.restore();
// Non-uniform scaling (x direction) ctx.strokeStyle = "#cf0"; ctx.save() ctx.translate(50,250); ctx.scale(0.75,1); drawSpirograph(ctx,22,6,5);
ctx.translate(133.333,0); ctx.scale(0.75,1); drawSpirograph(ctx,22,6,5);
ctx.translate(177.777,0); ctx.scale(0.75,1); drawSpirograph(ctx,22,6,5); ctx.restore(); */
/* 矩阵计算 详情参考 https://developer.mozilla.org/cn/Canvas_tutorial/Transformations
var sin = Math.sin(Math.PI/6); var cos = Math.cos(Math.PI/6); ctx.translate(200, 200); var c = 0; for (var i=0; i <= 12; i++) { c = Math.floor(255 / 12 * i); ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")"; ctx.fillRect(0, 0, 100, 10); ctx.transform(cos, sin, -sin, cos, 0, 0); } ctx.setTransform(-1, 0, 0, 1, 200, 200); //ctx.fillStyle = "rgba(255, 128, 255, 0.5)"; //ctx.fillRect(0, 50, 100, 100); */
/* 在已有图形后面再画新图形，还可以用来遮盖，清除(比 clearRect 方法强劲得多)某些区域 可参考 https://developer.mozilla.org/cn/Canvas_tutorial/Compositing
globalCompositeOperation = type type 有12种 source-over 新图形会覆盖在原有内容之上,默认值 source-in 新图形会仅仅出现与原有内容重叠的部分,其它区域都变成透明的 source-out 只有新图形中与原有内容不重叠的部分会被绘制出来 source-atop 新图形中与原有内容重叠的部分会被绘制,并覆盖于原有内容之上 destination-over 在原有内容之下绘制新图形 destination-in 原有内容中与新图形重叠的部分会被保留,其它区域都变成透明的 destination-out 原有内容中与新图形不重叠的部分会被保留 destination-atop 原有内容中与新内容重叠的部分会被保留,并会在原有内容之下绘制新图形 lighter 两图形中重叠部分作加色处理 darker 两图形中重叠的部分作减色处理 xor 重叠的部分会变成透明 copy 只有新图形会被保留,其它都被清除掉*/
/* 所有在路径外的部分被遮盖住 clip()
ctx.fillRect(0,0,150,150); ctx.translate(75,75);
// Create a circular clipping path ctx.beginPath(); ctx.arc(0,0,60,0,Math.PI*2,true); ctx.clip();
// draw background var lingrad = ctx.createLinearGradient(0,-75,0,75); lingrad.addColorStop(0, '#232256'); lingrad.addColorStop(1, '#143778');
ctx.fillStyle = lingrad; ctx.fillRect(-75,-75,150,150);
// draw stars for (j=1;j<50;j++){ ctx.save(); ctx.fillStyle = '#fff'; ctx.translate(75-Math.floor(Math.random()*150),75-Math.floor(Math.random()*150)); drawStar(ctx,Math.floor(Math.random()*4)+2); ctx.restore(); }*/
} }
/* function roundedRect(ctx,x,y,width,height,radius){ ctx.beginPath(); ctx.moveTo(x,y+radius); ctx.lineTo(x,y+height-radius); ctx.quadraticCurveTo(x,y+height,x+radius,y+height); ctx.lineTo(x+width-radius,y+height); ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius); ctx.lineTo(x+width,y+radius); ctx.quadraticCurveTo(x+width,y,x+width-radius,y); ctx.lineTo(x+radius,y); ctx.quadraticCurveTo(x,y,x,y+radius); ctx.stroke(); }*/
/* 画螺旋图案的方法
function drawSpirograph(ctx,R,r,O){ var x1 = R-O; var y1 = 0; var i = 1; ctx.beginPath(); ctx.moveTo(x1,y1); do { if (i>20000) break; var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72)) var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72)) ctx.lineTo(x2,y2); x1 = x2; y1 = y2; i++; } while (x2 != R-O && y2 != 0 ); ctx.stroke(); } */
/* 画星星 function drawStar(ctx,r){ ctx.save(); ctx.beginPath() ctx.moveTo(r,0); for (i=0;i<9;i++){ ctx.rotate(Math.PI/5); if(i%2 == 0) { ctx.lineTo((r/0.525731)*0.200811,0); } else { ctx.lineTo(r,0); } } ctx.closePath(); ctx.fill(); ctx.restore(); }*/
</script><style type="text/css"> canvas { border: 1px solid black; }</style></head><body onload="draw();"><canvas id="tutorial" width='400' height='400'></canvas></body></html>分享下
去掉
/*
*/
即可看到效果
转载于:https://www.cnblogs.com/loadbuffer/archive/2012/02/29/2373900.html
分享HTML5 canvas 的总结相关推荐
- 分享8款令人惊叹的HTML5 Canvas动画特效
HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...
- html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...
- html5教程鼠标,利用HTML5 Canvas制作键盘及鼠标动画的实例分享
键盘控制小球移动 众所周知,我们所看到的动画实际上就是一系列静态画面快速切换,从而让肉眼因视觉残像产生了「画面在活动」的视觉效果.明白了这一点后,在canvas上绘制动画效果就显得比较简单了.我们只需 ...
- html滑动直播,HTML5 canvas实现的静态循环滚动播放弹幕
本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕,分享给大家,具体如下: 使用方法和API 语法如下: canvasBarrage(canvas, data); 其中: canvas ...
- 如何使用HTML5 Canvas元素来裁剪图像
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动.调整大小和裁剪图像,这些技术适用于图片编辑器.照片分享等应用场景.借助HTML5 Canvas绘图功能,可以在浏览器端以比较简 ...
- Foundation HTML5 Canvas中的2处错误
最近公司项目需要使用HTML5 Canvas开发公司大厅展示系统,当然这个项目还在进行中,不过我在进行另外一个新项目,等项目结束时,我将分享项目代码.学习HTML5 canvas主要书籍是<Fo ...
- html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
- Aristochart – 灵活的 HTML5 Canvas 折线图
Aristochart 是基于 HTML5 Canvas 的折线图功能库,具有高定制性和灵活性的特点.Aristochart 会帮助你处理图形显示,让你能够专注于业务逻辑处理. 您可能感兴趣的相关文章 ...
- 用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法 发布时间:2020-08-29 11:24:23 来源:亿速云 阅读:96 作者:小新 这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
最新文章
- 8个可以提高数据科学工作效率、节省宝贵时间的Python库
- 微信小程序——真机调试方法（vConsole）
- select 和epoll模型区别
- mysql工作表格制作教程_Access制作复杂报表
- 三星公布三款新型车用芯片 向大众供应
- 计算机基础与python安装
- [转]Spring注解-@Configuration注解、@Bean注解以及配置自动扫描、bean作用域
- oracle,sqlserver,mysql区别
- UVALive2245 POJ1131 HDU1376 ZOJ1086 Octal Fractions【进制】
- 论文阅读-可变形卷积网络：Deformable Convolutional Networks
- 论文润色软件Stylewriter,whitesmoke,1check使用亲测
- 计算机专用英语1500词带音标,计算机专用英语词汇1500词音标版.pdf
- 谷歌浏览器截取长图 （不用安装插件）
- Ubuntu下快速安装jdk、tomcat、mysql和Redis
- 计算机主板品牌排行榜,电脑主板十大品牌排行榜
- 容斥原理和概率与数学期望
- tabindex 属性 - HTML中代表使用Tab键的遍历顺序
- 【前端】HTML的常用标签
- vulnhub FristiLeaks: 1.3
- 孩子的同学写的：《恋秋 忆秋 叹秋》