canvas
关注
分享
扫一扫
laxexue
这个作者很懒，什么都没留下…
展开
-
canvas 的简单运用
1.在html5中使用<!DOCTYPE html><html><head> <title></title></head><body> <canvas id="canvas" style="border: 1px solid #aaa;display:原创 2018-10-10 16:08:05 · 183 阅读 · 0 评论 -
canvas 的曲线绘制
arc(x,y,r,startingAngle,endingAngle,anticlockwise = false);context.move(x0,y0);开始点 arcTo(x1,y1, 控制点 x2,y2, 结束点 radius)二次贝塞尔曲线contex.moveTo(x0,y0);//起始点contet.qua...原创 2018-12-05 15:24:39 · 488 阅读 · 0 评论 -
canvas的arcTo
var canvas = document.getElementById('canvas');canvas.width = 800;canvas.height = 800;var context = canvas.getContext('2d');arcToTest(context,150,150,650,150,650,650,300);function arcToTest(c...原创 2018-12-03 14:32:42 · 252 阅读 · 0 评论 -
canvas 的变换矩阵
transform(a,b,c,d,e,f);默认transform(1,0,0,1,0,0);没有任何改变每次的操作会产生叠加的效果setTransform() 忽略之前的操作原创 2018-11-28 17:40:21 · 398 阅读 · 0 评论 -
canvas 星空
<!DOCTYPE html><html><head> <title></title></head><body> <canvas id="canvas" style="border: 1px solid #aaa;display: block;margin:原创 2018-11-28 17:25:50 · 342 阅读 · 0 评论 -
canvas绘制直线
1、绘制一条直线context.moveTo(100,100);context.lineTo(700,700);2、绘制一个箭头 → closePath()要在stroke()前面context.lineWidth = 15;context.beginPath();context.moveTo(100,200);context.lineTo(500,20...原创 2018-11-28 14:51:54 · 9744 阅读 · 0 评论 -
canvas 的五角星
<!DOCTYPE html><html><head> <title></title></head><body> <canvas id="canvas" style="border: 1px solid #aaa;display: block;margin:原创 2018-11-28 11:57:44 · 156 阅读 · 0 评论 -
canvas 的渐变
<!DOCTYPE html><html><head> <title></title></head><body><canvas id="canvas"> </canvas></body>原创 2018-11-29 10:49:49 · 144 阅读 · 0 评论 -
canvas动画
setInterval( function(){//函数表示每一帧干什么 render(); update(); },50//时间每隔多长时间 毫秒);<!DOCTYPE html><html><head> <title></title></head><...原创 2018-11-14 13:49:40 · 122 阅读 · 0 评论 -
canvas弧线与圆
绘制一条弧线context.arc( centerx,centery,radius, startingAngle,endingAngle, anticlockwise = false//顺时针默认 true逆时针)<!DOCTYPE html><html><head> <title></titl...原创 2018-11-13 15:39:32 · 310 阅读 · 0 评论 -
canvas七巧板
<!DOCTYPE html><html><head> <title></title></head><body> <canvas id="canvas" style="border: 1px solid #aaa;display: block;margi原创 2018-11-13 14:28:54 · 148 阅读 · 0 评论 -
canvas 的文字渲染基础
文字渲染基础 context.font = "bold 40px Arial";粗体 字号 字体context.fillText(string,x,y,[maxlen]);字符 起始坐标context.strokeText(string,x,y,[maxlen]);font 默认值 20px sans-serif context.font = font-style font-veria...原创 2018-12-13 13:41:49 · 1010 阅读 · 0 评论