H5 Canvas 的绘制图形

web前端游戏开发面试题|前端开发需要阅读的书籍|前端开发使用的软件下载

代码片段 1

<!doctype html>

<html>

<head>

<title>Html5-Canvas</title>

</head>

<body>

此浏览器不支持canvas，建议换更高级的浏览器查看。

</canvas>

var canvas = document.getElementById(“canvas”);

var context = canvas.getContext(‘2d’);

//直线版

var dx = 150;

var dy = 150;

var s = 100;

context.beginPath();

context.fillStyle = ‘rgb(100,255,100)’;

context.strokeStyle = ‘rgb(0,0,100)’;

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);

context.lineTo(dx + x * s, dy + y * s);

}

context.closePath();

context.fill();

context.stroke();

</script>

</body>

</html>

代码片段 2

<!doctype html>

<html>

<head>

<title>Html5-Canvas</title>

</head>

<body>

此浏览器不支持canvas，建议换更高级的浏览器查看。

</canvas>

var canvas = document.getElementById(“canvas”);

var context = canvas.getContext(‘2d’);

//曲线版

var dx = 150;

var dy = 150;

var s = 100;

context.beginPath();

context.globalCompositeOperation = ‘and’;

context.fillStyle = ‘rgb(100,255,100)’;

var x = Math.sin(0);

var y = Math.cos(0);

var dig = Math.PI / 15 * 11;

context.moveTo(dx, dy);

for (var i = 0; i < 30; i++) {

var x = Math.sin(i * dig);

var y = Math.cos(i * dig);

context.bezierCurveTo(dx + x * s, dy + y * s + 50, dx + x * s – 50, dy + y * s, dx + x * s, dy + y * s);

}

context.closePath();

context.fill();

context.stroke();

</script>

</body>

</html>

代码片段 3

<!doctype html>

<html>

<head>

<title>Html5-Canvas</title>

</head>

<body>

此浏览器不支持canvas，建议换更高级的浏览器查看。

</canvas>

var canvas = document.getElementById(“canvas”);

var context = canvas.getContext(‘2d’);

//渐变图形-线性渐变

var g1 = context.createLinearGradient(0, 0, 0, 300);

g1.addColorStop(0, ‘rgb(255,255,0)’);

g1.addColorStop(1, ‘rgb(0,255,255)’);

context.fillStyle = g1;

context.fillRect(0, 0, 400, 300);

var n = 0;

var g2 = context.createLinearGradient(0, 0, 300, 0);

g2.addColorStop(0, ‘rgba(0,0,255,0.5)’);

g2.addColorStop(1, ‘rgba(255,0,0,0.5)’);

for (var i = 0; i < 10; i++) {

context.beginPath();

context.fillStyle = g2;

context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);

context.closePath();

context.fill();

}

</script>

</body>

</html>

代码片段 4

<!doctype html>

<html>

<head>

<title>Html5-Canvas</title>

</head>

<body>

此浏览器不支持canvas，建议换更高级的浏览器查看。

</canvas>

var canvas = document.getElementById(“canvas”);

var context = canvas.getContext(‘2d’);

//渐变图形-径向渐变

var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);

g1.addColorStop(0.1, ‘rgb(255,255,0)’);

g1.addColorStop(0.3, ‘rgb(255,0,255)’);

g1.addColorStop(1, ‘rgb(0,255,255)’);

context.fillStyle = g1;

context.fillRect(0, 0, 400, 300);

var n = 0;

var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);

g2.addColorStop(0.1, ‘rgba(255,0,0,0.5)’);

g2.addColorStop(0.7, ‘rgba(255,255,0,0.5)’);

g2.addColorStop(1, ‘rgba(0,0,255,0.5)’);

for (var i = 0; i < 10; i++) {

context.beginPath();

context.fillStyle = g2;

context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);

context.closePath();

context.fill();

}

</script>

</body>

</html>

代码片段 5

<!doctype html>

<html>

<head>

<title>Html5-Canvas</title>

</head>

<body>

此浏览器不支持canvas，建议换更高级的浏览器查看。

</canvas>

var canvas = document.getElementById(“canvas”);

var context = canvas.getContext(‘2d’);

//图形的变形

context.fillStyle = “#EEEEFF”;

context.fillRect(0, 0, 400, 300);

// 图形绘制

context.translate(200, 50);

context.fillStyle = ‘rgba(255,0,0,0.25)’;

for (var i = 0; i < 50; i++) {

context.translate(25, 25);

context.scale(0.95, 0.95);

context.rotate(Math.PI / 10);

context.fillRect(0, 0, 100, 50);

}

</script>

</body>

</html>

代码片段 6

<!doctype html>

<html>

<head>

<title>Html5-Canvas</title>

</head>

<body>

此浏览器不支持canvas，建议换更高级的浏览器查看。

</canvas>

var canvas = document.getElementById(“canvas”);

var context = canvas.getContext(‘2d’);

//五角星

context.translate(50, 50);

for (var i = 0; i < 1; i++) {

context.translate(25, 25);

context.scale(0.95, 0.95);

context.rotate(-Math.PI / 190 * 30);

create5Star(context);

context.stroke();

}

function create5Star(context) {

var dx = 50;

var dy = 50;

var s = 100;

context.beginPath();

context.strokeStyle = ‘rgba(255,0,0,0.5)’;

var x = Math.sin(0);

var y = Math.cos(0);

var dig = Math.PI / 5 * 4;

for (var i = 0; i < 5; i++) {

var x = Math.sin(i * dig);

var y = Math.cos(i * dig);

context.lineTo(dx + x * s, dy + y * s);

}

context.closePath();

}

</script>

</body>

</html>

代码片段 7

<!doctype html>

<html>

<head>

<title>Html5-Canvas</title>

</head>

<body>

此浏览器不支持canvas，建议换更高级的浏览器查看。

</canvas>

var canvas = document.getElementById(“canvas”);

var context = canvas.getContext(‘2d’);

//图像组合

var oprtns = new Array(

“source-over”,//默认值，表示新图形覆盖在原有图形之上。

“source-atop”,//在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。

“source-in”,//在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。

“source-out”,//在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。

“destination-atop”,//在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。

“destination-in”,//在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。

“destination-out”,//在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。

“destination-over”,//在源图像上方显示目标图像。

“lighter”,//原有图形与新图形均绘制，重叠部分做加色处理。

“copy”,//显示源图像。忽略目标图像。

“xor”//只绘制新图形中与原有图形不重叠的部分，重叠部分变成透明。

);

i = 10; //读者可自行修改该参数来显示想要查看的组合效果

//绘制原有图形（蓝色长方形）

context.fillStyle = “blue”;

context.fillRect(10, 10, 60, 60);

//设置组合方式，从组合的参数数组中挑选组合方式，此处因为i是8，所以选择oprtns数组中第9(数组从0开始计算）个组合方式lighter

context.globalCompositeOperation = oprtns[i];

//设置新图形（红色圆形）

context.beginPath();

context.fillStyle = “red”;

context.arc(60, 60, 30, 0, Math.PI * 2, false);

context.fill();

//动画版图形组合

var globalId;

var i = 0;

setInterval(Composite, 1000);

function Composite() {

var oprtns = new Array(

“source-atop”,

“source-in”,

“source-out”,

“source-over”,

“destination-atop”,

“destination-in”,

“destination-out”,

“destination-over”,

“lighter”,

“copy”,

“xor”

);

if (i > 10) i = 0;

context.clearRect(0, 0, canvas.width, canvas.height);

context.save();

//绘制原有图形（蓝色长方形）

context.fillStyle = “blue”;

context.fillRect(10, 10, 60, 60);

//设置组合方式

context.globalCompositeOperation = oprtns[i];

//设置新图形（红色圆形）

context.beginPath();

context.fillStyle = “red”;

context.arc(60, 60, 30, 0, Math.PI * 2, false);

context.fill();

context.restore();

i = i + 1;

}

</script>

</body>

</html>

代码片段 8

<!doctype html>

<html>

<head>

<title>Html5-Canvas</title>

</head>

<body>

此浏览器不支持canvas，建议换更高级的浏览器查看。

</canvas>

var canvas = document.getElementById(“canvas”);

var context = canvas.getContext(‘2d’);

//阴影

context.shadowOffsetX = -10;

context.shadowOffsetY = -10;

context.shadowColor = ‘rgba(250,0,0,0.5)’;

context.shadowBlur = 7.5;

context.translate(0, 50);

for (var i = 0; i < 3; i++) {

context.translate(50, 50);

create5Star(context);

context.fill();

}

function create5Star(context) {

var dx = 100;

var dy = 0;

var s = 50;

//创建路径

context.beginPath();

context.fillStyle = ‘rgba(255,0,0,0.5)’;

var x = Math.sin(0);

var y = Math.cos(0);

var dig = Math.PI / 5 * 4;

for (var i = 0; i < 5; i++) {

var x = Math.sin(i * dig);

var y = Math.cos(i * dig);

context.lineTo(dx + x * s, dy + y * s);

}

context.closePath();

}

</script>

</body>

</html>

前端开发面试题 gihub|前端开发需要逻辑|前端开发哪个软件好

H5 Canvas 的绘制图形

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发