JavaScript 之 canvas (待补充 )-白红宇

JavaScript 之 canvas (待补充 )

阅读量：4953 次

发布时间：2019-06-12

本文共 1610 字，大约阅读时间需要 5 分钟。

<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

您的浏览器不支持 HTML5 canvas 标签。

</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

//方块

ctx.rect(20,20,200,100);

ctx.stroke();

//简单的一条线

//我们接下来的 beginPath()和closePath()，是画图案的开关，尽量养成习惯，我们画的线是无色线

// ctx.stroke() 描线

ctx.beginPath();

ctx.moveTo(220,120);

ctx.lineTo(300,160);

ctx.closePath();

ctx.stroke();

//简单的一条线

ctx.beginPath();

ctx.moveTo(300,160);

ctx.lineTo(350,160); //lineto指向

ctx.closePath();

ctx.stroke();

//一个半圆

ctx.beginPath();

ctx.arc(10,60,200,0,Math.PI,false);//起点坐标，半径，角度开始，角度结束。

ctx.closePath();

ctx.stroke();

//逆时针半圆填充上色

ctx.beginPath();

ctx.arc(700,400,20,0,Math.PI,true);

ctx.fillStyle='#ffff0f'

ctx.fill();

//顺时针，半圆填充上色

ctx.beginPath();

ctx.arc(700,300,20,0,Math.PI,false);

ctx.fillStyle='#f00f0f'

ctx.fill();

//圆弧

ctx.beginPath();

ctx.moveTo(50, 50);

ctx.arcTo(200, 50, 200, 200, 50);//点1坐标点2坐标圆弧半径

ctx.lineTo(200, 200)

ctx.stroke();

//贝塞尔曲线,需要: 起点，终点，控制点(此处被一点控制)

ctx.beginPath();

ctx.moveTo(800,400); /*起点*/

var x=900,y=450; /*终点*/

var cp1x=950,cp1y=300; /*控制点*/

ctx.quadraticCurveTo(cp1x,cp1y,x,y);

ctx.stroke();

//两点控制的贝塞尔曲线

ctx.beginPath();

ctx.moveTo(900, 300); //起始点

var cp1x = 20, cp1y = 100; //控制点1

var cp2x = 100, cp2y = 120; //控制点2

var x = 950, y = 450; // 结束点

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

ctx.stroke();

</script>

</body>

</html>

转载于:https://www.cnblogs.com/3532gll/p/9567953.html

你可能感兴趣的文章