加载中
Canvas中的globalAlpha和globalCompositeOperation

1.globalAlpha 效果图: 代码: 2.globalCompositeOperation 效果图: 代码: globalCompositeOperation的11种取值

2017/12/14 23:09
11
Canvas文字的渲染及阴影

1.文字的渲染 context.font = "bold 40px Arial"; string要渲染的字符,x,y是文字的起始坐标,Maxwidth文字最大的宽度 context.fillText(string,x,y,Maxwidth); context.strokeText(string,x...

2017/12/13 22:40
13
canvas 曲线绘制

1.绘制一角湾月 效果图: 代码: 2.给星空加上一角弯月 效果图: 代码: 在星空方法中调用如上代码如下: 3.贝塞尔曲线 //贝塞尔曲线 //context.moveTo(x0,y0); //context.quadraticCurveTo(...

2017/12/12 22:36
9
Canvas:createPattern、圆角矩形、棋盘格、arcTo圆弧

1.createPattern实例代码: 2.圆角矩形 效果图: 代码: 3.绘制棋盘格 效果图: 代码: /*optional*/fillColor可选参数 pathRoundRect方法是上一个圆角多边形方法 4,arcTo圆弧 效果图: 圆弧...

2017/12/07 22:35
11
Canvas图形变换矩阵、渐变色填充、星空的改进

1.图像变换矩阵 效果图: 知识点: 代码: 2.渐变色的填充 LinearGradient 效果图: 代码: 渐变色的填充 radialGradient 效果图: 、 代码: 3.对星空的改进。 效果图: 代码:...

2017/12/05 23:37
24
Canvas绘制简单的星空及图像变换

1.绘制简单的星空 效果图: 代码: 2.图像变换 效果图: 代码: canvas技术: 图像变换;图像变换函数是叠加的 位移: translate(x,y); 旋转:rotate(deg); 缩放: scale(sx,sy);...

2017/12/04 23:15
13
Canvas绘制箭头、矩形、五角星

1.绘制箭头 效果图: 代码: 2.绘制矩形 效果图: 代码: 3.绘制五角星 效果图: 代码: 知识点: 1.context.beginPath(); 2.context.closePath(); 3.context.moveTo(x,y); 4.context.lineTo...

2017/12/03 23:29
47
Canvas倒计时优化及总结

效果图: 1.优化小球数组不断变大 在updateBalls方法中加入如下红色代码,保证小球滚出了画面移除小球 function updateBalls(){ for (var i = 0; i < balls.length; i++) { balls[i].x += b...

2017/12/02 13:28
3
Canvas时针加上动态的小球

效果图: 在上一篇倒计时的基础上,对tangram.js做了如下修改: WINDOW_WIDTH = 1024; WINDOW_HEIGHT = 768; //半径 var RADIUS = 8; //顶边距 var MARGIN_TOP = 250; //左边距 var MARGIN_L...

2017/11/30 22:46
1
canvas绘制一个倒计时

效果图=============: html ==============================================: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="digit.js"></script>...

2017/11/29 22:09
5
canvas绘制一个七巧板

效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style="border: 1px solid #aaa; display: block;margin...

2017/11/28 22:36
3

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部