HTML canvas 绘图
20118-4-9 :”canvas 绘图:
canvas 就像一张纸,可以定义大小 并可以在上面绘制一些图形形状;
要点:
canvas 在使用画布前需要在标签内定义画布大小
例: <canvas id="myca" width="400" height="400"> </canvas> // 宽高一定要在canvas内赋值,不可css赋值;
var c=document.getElementById("myca"); //获取画布 canvas
var ctx=c.getContext("2d"); // 声明绘制环境为2d
绘制线条 : crt.stroke();
- 实例: 绘制一条 L 直线:
ctx.beginPath(); // 开始起笔绘图
补充 :
ctx.strokeStyle = "green"; // 绘制 线条的颜色
ctx.lineTo(x,y); // 结束点可以有多个; 绘制想要完成的图形;
- 实例: 绘制圆形:
ctx.beginPath(); // 另外起笔
<canvas id="myca" width="400" height="400"> </canvas>
var c=document.getElementById("myca"); //获取画布 canvas
var ctx=c.getContext("2d"); // 声明绘制环境为2d
ctx.arc(a,b,c,d,e,true); // 绘制圆形的参数
a = 圆心的x坐标 b = 圆心的y坐标 c = 圆心的半径r d 表示开始的圆角度 e 表示结束的角度 true= 顺时针绘图 false = 逆时针绘图
结束角 : Math.PI*2 = 360° ; Math.PI*1 = 180° ;
例: ctx.art(100,100,60,0, Math.PI*2,true)
写完后: ctx.closePoth() // 告诉浏览器爸爸写完了;
ctx.fill() // 让浏览器绘制;
- 实例: 绘制矩形:
<canvas id="myca" width="400" height="400"> </canvas>
var c=document.getElementById("myca"); //获取画布 canvas
var ctx=c.getContext("2d"); // 声明绘制环境为2d
1. ctx.fillStyle = 'gray'; //定义填充样式
2. var gr=crt.createLinearGradient(a,b,c,d); // 绘制渐变 crt.createLinearGradient(a,b,c,d); // x y 右上角x 左下角y
gr.addcolorstop(a,b); // a表示从0-1 b为颜色值
例; gr.addcolorstop(0,"red");
gr.addcolorstop(0.5,"greey");
ctx.fillstyle = gr; // 将渐变填充赋值给填充色
ctx.strokeStyle = 'green'; //定义线性样式
ctx.lineWidth = '10'; //定义线性的线宽,宽是从矩形框向内外两边同时加粗的
ctx.fillRect(100,50,100,100); //定义面性矩形[这四个参数分别是(横坐标,纵坐标,宽,高)]{这是灰色的矩形}
ctx.fillRect绘制出来的矩形仅填充
ctx.strokeRect(300,50,100,100); //定义线性矩形[这四个参数分别是(横坐标,纵坐标,宽,高)]{这是绿色的矩形框}
ctx.strokeRect绘制出来的矩形仅边框颜色
ctx.rect(100,200,100,100); //定义矩形(包括面性或者线性)
ctx.rect绘制出来的矩形为填充和边框
ctx.fill();ctx.stroke(); //定义到底是线性还是面性,线面性上单独的在上面已经有了,线面性是定义在同个矩形就是灰色矩形加个绿色的边框
实例 :
重点笔记
1. ctx.fill(); 停笔 已经绘制完成 ; // 仅图形 线性不算
2. ctx.stroke(); 告诉浏览器 可以开始绘制了 // 仅图形 线性不算
上面的代码 效果图