Canvas就是画布,可以画任何的线、图形、填充等一系列的操作,有强大的绘图能力。
一、Canvas画形状
<canvas id="xxx" height=...width=...>…</canvas>
id是canvas的标识,height是canvas的高度,单位是像素
Canvas中的坐标系,左上角是(0,0),点是(4,3)
例1-画三角形(通过直线)
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" height=200 width=200>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawtriangle()
{
var c=document.getElementById("myCanvas"); //获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文
ctx.beginPath(); //开始绘图路径
ctx.moveTo(100,0); // 将坐标移至直线起点
ctx.lineTo(50,100); // 绘制直线
ctx.lineTo(150,100); // 绘制直线
ctx.lineTo(100,0); // 绘制直线,回到起点
ctx.stroke(); // 通过线条绘制轮廓
}
window.addEventListener("load", drawtriangle, true);
</script>
</body>
</html>
例2-画菊花图(通过直线)
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" height=1000 width=1000>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawline()
{
var c=document.getElementById("myCanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文
var dx=150;
var dy=150;
var s = 100;
ctx.beginPath(); // 开始绘图路径
var x = Math.sin(0);
var y = Math.cos(0);
var dig=Math.PI/15*11;
for(var i = 0;i<30;i++){
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
//用三角函数计算顶点
ctx.lineTo(dx+x*s,dy+y*s);
}
ctx.closePath(); // 如果不是闭合路径(终点和起点是同一个坐标),就需要这个
ctx.stroke(); // 通过线条绘制轮廓(边框)
}
window.addEventListener("load", drawline, true);
</script>
</body>
</html>
例3-画矩形
可以通过rect()、strokeRect()绘制矩形边框,区别是strokeRect()不需要beginPath()和stroke()即可画图,fillRect()可以指定填充矩形区域,调用clearRect()可以擦除指定的矩形区域。
<canvas id="myCanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawRect()
{
var c=document.getElementById("myCanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文
//绘制起始点、控制点、终点
ctx.beginPath(); // 开始绘图路径
ctx.rect(20,20, 100, 50); // (x, y, width, height
ctx.stroke(); // 通过线条绘制轮廓(边框)
}
window.addEventListener("load", drawRect, true);
</script>
例4-画圆弧
<canvas id="myCanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
var c=document.getElementById("myCanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文
var radius = 100; // 圆弧的半径
var startingAngle = 0; //圆弧的起始角度
var endingAngle = 2 * Math.PI; //圆弧的结束角度
ctx.beginPath(); // 开始绘图路径
ctx.arc(150, 150, radius, startingAngle, endingAngle, false); //false表示顺时针绘制
ctx.stroke();
}
window.addEventListener("load", draw, true);
</script>
二、Canvas描边和填充
1. 描边
扫描二维码关注公众号,回复:
11509722 查看本文章
![](/qrcode.jpg)
var c=document.getElementById("XXX");
var ctx=c.getContext("2d");
ctx.lineWidth = 10; //描边宽度为10
ctx.strokeStyle = "red" //描边颜色红色
2.填充图形内部
ctx.fillStyle = 'yellow' //填充图形内部的颜色为黄色
ctx.fillRect(65,65,100,100) //矩形的宽度和高度为100,内部填充黄色
3.渐变颜色
(1)以线性颜色渐变方式创建CanvasGradient、
creatLinearGradient(xStart,yStart, xEnd, yEnd)
(2)以放射颜色渐变方式创建CanvasGradient (圆)
creatRadialGradient(xStart,yStart, radiusStart, xEnd, yEnd, radiusEnd)
为渐变对象设置颜色
addColorStop(offset,color)
例子:使用黄、绿、红的放射渐变颜色填充一个圆
<canvas id="myCanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
var c=document.getElementById("myCanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文
// 对角线上的渐变
var Colordiagonal = ctx.createRadialGradient(100,100, 0, 100,100, 100);
Colordiagonal.addColorStop(0, "red");
Colordiagonal.addColorStop(0.5, "green");
Colordiagonal.addColorStop(1, "yellow");
var centerX = 100;
var centerY = 100;
var radius = 100;
var startingAngle = 0;
var endingAngle = 2 * Math.PI;
ctx.beginPath(); // 开始绘图路径
ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
ctx.fillStyle = Colordiagonal;
ctx.stroke();
ctx.fill();
}
window.addEventListener("load", draw, true);
</script>
如果要填充透明颜色的,使用rgba()方法
X.fillStyle = "rgb(255, 0, 0, 0.25)" //红(0-255)、绿、蓝、透明度(0-1)
PS:HTML5的写法要分号;或者不要分号;都可以!