Html5中Canvas绘图

来源：互联网发布：Mac玩钢铁雄心4 编辑：程序博客网时间：2024/05/16 05:42

Canvas绘图

Canvas的基本API

制作矩形

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Canvas</title>

</head>

<body>

<canvaswidth="500"height="300"style="border:1px solid blueviolet;">

浏览器不支持Canvas

</canvas>

<scripttype="text/javascript">

//获取canvas标签

varcas = document.querySelector("canvas");

//获取绘制环境

varctx = cas.getContext("2d");

//填充颜色，如同更换画笔一般

ctx.fillStyle = '#ff0';

//绘制矩形

ctx.fillRect(100,100,150,100);

console.log(cas);

</script>

</body>

</html>

使用路径绘制图形

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Canvas</title>

</head>

<body>

<canvaswidth="500"height="300"style="border:1px solid blueviolet;">

浏览器不支持Canvas

</canvas>

<scripttype="text/javascript">

//获取canvas标签

varcas = document.querySelector("canvas");

//获取绘制环境

varctx = cas.getContext("2d");

//路径开始

ctx.beginPath();

//路径规划

ctx.moveTo(100,100); //移动画笔，没有路径线

ctx.lineTo(200,100); //在画布上移动画笔，如同画画

ctx.lineTo(100,200);

ctx.lineTo(150,0);

ctx.lineTo(200,200);

ctx.lineTo(100,100);

//路径结束

ctx.closePath();

//填充路径

ctx.fillStyle = 'red';

ctx.fill();

</script>

</body>

</html>

效果图：

制作圆形、扇形

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Canvas</title>

</head>

<body>

<canvaswidth="500"height="300"style="border:1px solid blueviolet;">

浏览器不支持Canvas

</canvas>

<scripttype="text/javascript">

//获取canvas标签

varcas = document.querySelector("canvas");

//获取绘制环境

varctx = cas.getContext("2d");

//路径开始

ctx.beginPath();

//路径移动到圆心

ctx.moveTo(100,100);

//画一个整圆

//ctx.arc(100,100,50,0,360);

//根据传递的参数画图

ctx.arc(100,100,50,0,getHuDu(120));

//路径结束

ctx.closePath();

//填充路径

ctx.fillStyle = 'red';

ctx.fill();

//获取弧度

functiongetHuDu(hd){

returnhd*Math.PI/180;

}

</script>

</body>

</html>

效果图：

制作文字

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Canvas</title>

</head>

<body>

<canvaswidth="500"height="300"style="border:1px solid blueviolet;">

浏览器不支持Canvas

</canvas>

<scripttype="text/javascript">

//获取canvas标签

varcas = document.querySelector("canvas");

//获取绘制环境

varctx = cas.getContext("2d");

//绘制文字

ctx.font = '20px 宋体';

ctx.align = 'center';

ctx.fillText('午_夜博客',200,150);

</script>

</body>

</html>

效果图：

绘制图片

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Canvas</title>

</head>

<body>

<canvaswidth="500"height="300"style="border:1px solid blueviolet;">

浏览器不支持Canvas

</canvas>

<scripttype="text/javascript">

//获取canvas标签

varcas = document.querySelector("canvas");

//获取绘制环境

varctx = cas.getContext("2d");

//获取图片

varimg = new Image();

img.src = 'img/te.png';

img.onload = function(){

//绘制图片

ctx.drawImage(img,0,0,500,300);

}

</script>

</body>

</html>

效果图：

0 0