-
文本对齐方式
查看全部 -
context.font设置
查看全部 -
context.font = "bold 40px Arial"(粗框,40px大小,字体)
context.fillStyle="#058"颜色
context.fillText(string,x,y,[maxlen](文字的最长宽度))
context.strokeText(string,x,y,[maxlen])(只有外边框的文字)
查看全部 -
贝塞尔曲线
查看全部 -
曲线的绘制
查看全部 -
三次贝塞尔曲线，有两个控制点
查看全部 -
二次贝塞尔曲线，(x0, y0)就是曲线的起始点，(x2, y2)就是曲线的终止点
查看全部 -
arcTo
查看全部 -
canvas 变换矩阵
查看全部 -
lineJoin
miter(default)、 bevel斜接、 round圆角
miterLimit
查看全部 -
画一个五角星
封装五角星函数
查看全部 -
画一个五角星
查看全部 -
线条属性
lineCap — 线条帽子：
+ butt (default)
+ round 圆头
+ square 方头
注意：lineCap只能用于线段的开始处和结尾处
查看全部 -
总结：
HTML—创建一个画布：
<canvas id="canvas"></canvas>
JavaScript—
//创建绘图变量 var canvas = document.getElementById('canvas'); //获取绘图上下文环境 var context = canvas.getContext("2d"); //使用context进行绘制canvas常用的属性：
canvas.width canvas.height canvas.getContext('2d')canvas构成线条使用方法：
moveTo(x, y); lineTo(x, y); beginPath(); closePath();
canvas具体状态设置：
lineWidth — 线条 strokeStyle — 线条样式 fillStyle — 填充样式 stroke() — 函数 绘制边框 fill() — 函数 进行填充
简易函数—矩形
rect(x, y, width, height) — 绘制矩形边框路径 fillRect(x, y, width, height) — 具体填充矩形 strokeRect(x, y, width, height) — 绘制带有边框矩形
查看全部 -
transform()是可以不断累加的 setTransform() 可以让之前的transform()累加的效果失效 setTransform类似于重新设置
查看全部
举报
0/150
提交
取消