<body>
<canvas></canvas>
</body>
在chrome浏览器里，<canvas>的默认尺寸是300*150，display值是inline。
要想在canvas这块画布上绘图，首先需要取得绘图上下文，即调用API getContext。
getContext('2d')可获得2D上下文对象。
2D上下文坐标系以canvas画布左上角为原点。
属性
fillStyle
填充样式strokeStyle
描边样式lineCap
线段末端属性roundsquarebutt
默认值
lineWidth
线段厚度lineJoin
线段连接部分的属性roundbevelmiter
默认值
font
绘制文本时，指定字体样式 默认值是10px sans-serif，即font-size font-familytextAlign
绘制文本时，指定文本的对齐方式。
这里的对齐，是相对于fillText(text,x,y)或strokeText(text,x,y)中的x值。left
x坐标位置在文本的左边right
x坐标位置在文本的右边center
x坐标位置在文本的中间start
默认值，和direction有关end
和direction有关
textBaseline
绘制文本时，指定文本基线位置。
基线位置就是fillText(text,x,y)或strokeText(x,y)中的y所在坐标高度。alphabetic
默认值，小写字母x的基线即文本基线top
文本基线在文本块的顶部middle
文本基线在文本块的中间bottom
文本基线在文本块的底部
方法
fillRect(x,y,width,height)
给矩形填充指定颜色，当然，得事先指定fillStyle值strokeRect(x,y,width,height)
使用指定颜色给矩形描边，同样，也得事先指定strokeStyle值x,y
矩形左上角坐标width
矩形的宽height
矩形的高
fillText(text,x,y)
在坐标(x,y)上填充文本fillText(text,x,y,maxWidth)
maxWidth，是可选参数。
当文本宽度超过最大限定宽度时，文本会自动缩小以适应最大宽度
strokeText(text,x,y)
在坐标(x,y)上绘制文本strokeText(text,x,y,maxWidth)
同fillText(text,x,y,maxWidth)
measureText(text)
会根据当前上下文的font、textAlign、textBaseline计算指定文本大小clearRect(x,y,width,height)
清除画布clearRect(0,0,c.width,c.height)
清除整个画布clearRect(10,10,50,50)
清除部分画布
beginPath()
开始创建新路径。arc(x,y,radius,startAngle,endAngle,anticlockwise)
绘制圆弧路径，但是只有调用stroke()或fill()，圆弧才会真正地被绘制在画布上。x,y
圆心坐标radius
圆弧半径startAngle
圆弧起点endAngle
圆弧终点anticlockwise
是否逆时针绘制圆弧
moveTo(x,y)
绘制游标移动到坐标(x,y)上，但此时并没有画线。lineTo(x,y)
从上一点开始画直线，终点是(x,y)isPointInPath(x,y)
点(x,y)是否在路径范围内isPointInStroke(x,y)
点(x,y)是否在描边上
绘制矩形
<body>
<canvas width="100px" height="100px"></canvas>
<script>
var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red"
ctx.fillRect(10,10,50,50);
ctx.strokeStyle = "blue";
ctx.strokeRect(60,60,20,20);
</script>
</body>
绘制路径
想绘制路径，必须先调用beginPath()。
绘制圆
arc(x,y,radius,startAngle,endAngle,anticlockwise)绘制完圆弧路径后，必须调用stroke()或者fill()方法，圆弧才会真正地被绘制在画布上。
绘制圆环
<body>
<canvas width="100" height="100"></canvas>
<script>
var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,50,0,2*Math.PI,false);
ctx.moveTo(90,50);
ctx.arc(50,50,40,0,2*Math.PI,false);
ctx.stroke();
</script>
</body>
绘制时钟
<body>
<canvas width="100" height="100"></canvas>
<script>
var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
//大圆弧
ctx.arc(50,50,50,0,2*Math.PI,false);
//小圆弧
ctx.moveTo(90,50);
ctx.arc(50,50,40,0,2*Math.PI,false);
//分针，长直线
ctx.moveTo(50,50);
ctx.lineTo(50,15);
//时针，短直线
ctx.moveTo(50,50);
ctx.lineTo(80,50);
ctx.stroke();
</script>
</body>
绘制文本
<body>
<canvas width="100" height="100"></canvas>
<script>
var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
ctx.font = "32px sans-serif";
// ctx.fillText("hello",20,40);
ctx.strokeText("hello",20,40)
</script>
</body>
<body>
<canvas width="100" height="100"></canvas>
<script>
var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
//大圆弧
ctx.arc(50,50,50,0,2*Math.PI,false);
//小圆弧
ctx.moveTo(95,50);
ctx.arc(50,50,45,0,2*Math.PI,false);
//分针，长直线
ctx.moveTo(50,50);
ctx.lineTo(50,20);
//时针，短直线
ctx.moveTo(50,50);
ctx.lineTo(75,50);
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("12",50,15);
ctx.stroke();
</script>
</body>
寻找合适字体
<body>
<canvas width="100" height="100"></canvas>
<script>
var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
ctx.font = "24px sans-serif";
ctx.fillText("hello world",0,30);
</script>
</body>
字体过大，画布容不下。
使用measureText()，它会根据当前上下文的font、textAlign、textBaseline计算出指定文本大小。现给出字体的一个初始大小，通过measureText()找到合适的字体大小方将文本绘制在画布上。
<body>
<canvas width="100" height="100"></canvas>
<script>
var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
var fontSize = 24;
ctx.font = fontSize+"px sans-serif";
while(ctx.measureText("hello world").width>100){
fontSize--;
ctx.font = fontSize +"px sans-serif";
}
console.log(ctx.font);
ctx.fillText("hello world",0,30);
</script>
</body>
自适应字体
fillText(text,x,y,maxWidth)，当文本宽度超过了最大限定宽度，文本会自动缩小以适应最大宽度。
<body>
<canvas width="100" height="100"></canvas>
<script>
var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
ctx.font = "24px sans-serif";
ctx.fillText("hello world",0,30,100);
</script>
</body>
导出canvas上绘制的图像
<body>
<canvas width="100" height="100"></canvas>
<script>
var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,50,0,2*Math.PI,false);
ctx.moveTo(90,50);
ctx.arc(50,50,40,0,2*Math.PI,false);
ctx.stroke();
var url = c.toDataURL("image/png");
var image = new Image();
image.src = url;
document.body.appendChild(image);
</script>
</body>
ctx.toDataURL('image/png')导出png格式的图像。
扫一扫
260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
