个人中心
gpt4 book ai didi

javascript - 制作模糊形状的 HTML Canvas

转载 作者：行者123 更新时间：2023-11-30 12:30:59 25 4
gpt4 key购买 nike

我想使用 HTML 制作简单的形状。但是形状需要很大。并且 Canvas 是全屏的

示例:http://jsfiddle.net/xLgg43s9/1/embedded/result/

代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* { margin: 0; padding: 0;}

body, html { height:100%; }

#canvas {
    position:absolute;
    width:100%;
    height:100%;
}
</style>
</head>

<body>
<canvas id="canvas">
</canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle = "#000";
var w=canvas.width;
var h=canvas.height;
ctx.fillRect(0,0,w,h);
ctx.fillStyle="#fff";
ctx.beginPath();
var a=w/2;
var b=0;
ctx.arc(a,b,20,0,Math.PI,false);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="red";
ctx.fillRect(0,0,10,100);
ctx.stroke();
ctx.save();

ctx.translate(240, 120);

ctx.rotate(Math.PI / 4); // 45 degrees

ctx.fillStyle = "yellow";
ctx.fillRect(-40, -40, 20, 20);

ctx.restore();

</script>
</body>
</html>

请修复它。

最佳答案

不要通过 CSS 设置 Canvas 的大小，它会拉伸(stretch) Canvas 元素，而不是实际使 Canvas 变大。

改用 HTML 属性:

<canvas id="canvas" width="500" height="500"></canvas>

现在，由于您想将 Canvas 设置为 100% 宽度/高度，这些预设属性不会为您解决问题，您将不得不使用一些 JS:

var canvas = document.getElementById("canvas");
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;
var ctx=canvas.getContext("2d");
// etc...

如果您想在调整窗口大小时调整 Canvas 大小，我建议您查看 this answer.

关于javascript - 制作模糊形状的 HTML Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27705977/

25 4 0
文章推荐： javascript - 如何在一个 gulp 任务中运行多个操作？
文章推荐： c# - Bitmap.GetPixel() 返回错误值
文章推荐： c# - 使用 XmlSerializer 反序列化具有额外属性的列表
文章推荐： javascript - 多次重复正则表达式模式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com