Canvas学习记录及遇到的问题_作为助教,你觉得在使用canvas教学平台时可能会遇到哪些技术故障/问题?你会如何解-CSDN博客

本文链接：https://blog.csdn.net/qq_33688429/article/details/73501794

前言：大二期末，实训决定用HTML5的Canvas结合JavaScript写超级马里奥，现学Canvas。
放笔记没人看也不方便自己看，那就只放问题吧。

问题一：Canvas宽高习惯性设定为内部样式（标签之间）时，发现不对劲。画长方形却成了正方形
这里写图片描述
原因：Canvas默认宽高300*150，内部样式的设置，其实是对画布的拉伸，导致画的图像变形。设定Canvas的宽高要设定为行间样式。
例如：<canvas id="MyCanvas" width="500" height="500"></canvas>

矩形、路径、曲线的绘制示例代码：

<body>
    <p>画布500*500</p>
    <p>矩形200*100</p>
    <canvas id="MyCanvas" width="500" height="500">
    </canvas>
</body>
<!-- 注意文档载入顺序，获得元素要在加载script之前 -->
<script>
    //1.找到Canvas元素
    var mc = document.getElementById("MyCanvas");
    //2.获得context对象(H5的内建对象，用于在画布上绘图的环境)
    var ctx = mc.getContext("2d"); //目前只支持二维绘图类型

    /*绘制一个矩形*/
    //3.设定对象的背景填充样式
    ctx.fillStyle = "red";
    //4.设定位置和大小，绘制被填充的矩形
    ctx.fillRect(10,10,200,100); //矩形左上角坐标(10,10)，宽高(200,100)

    /*绘制路径*/
    ctx.moveTo(0, 0); //起始坐标(x,y)
    ctx.lineTo(100, 100); //拐点坐标
    ctx.lineTo(200, 300);
    ctx.lineTo(200, 400);
    ctx.lineTo(0, 400);
    ctx.fillStyle = "#abcdef"; //填充样式
    ctx.fill(); //填充路径内容
    ctx.strokeStyle = "#acbcfc"; //路径样式
    ctx.stroke(); //绘制已定义路径

    /*绘制圆形*/
    ctx.beginPath(); //重新开始新的路径
    //圆心、半径、起始角度、结束角度、顺/逆时针绘制（默认false顺时针）
    //角度是弧度制，0°为整圆最右边
    ctx.arc(200, 200, 200, 0.5*Math.PI, 1.5*Math.PI, true);
    ctx.strokeStyle = "black";
    ctx.stroke();
</script>

这里写图片描述

问题二：填充渐变，渐变没有显示或显示错误，和设定不一样
原因：创建渐变context.createLinearGradient(x0,y0,x1,y1)的四个参数，起点(x0,y0)，终点(x1,y1)均是相对于画布而言，画布左上角为坐标原点O，上边为正x轴，左边为正y轴，不要理解为相对填充的对象。另外填充对象的坐标，也是相对于O点。

文本、渐变示例代码：

<body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    /*文本*/
    ctx.font = "20px MicrosoftYahei"; //字体像素、样式
    ctx.fillText("Hello World",100,100); //内容、位置(x,y)
    ctx.strokeText("Hello World", 120,120); //空心字

    /*渐变*/
    /*线性渐变*/
    //createLinearGradient(x,y,x1,y1) - 创建线条渐变,注意渐变起点、终点相对于画布
    var grd = ctx.createLinearGradient(200, 200, 200, 280); //创建，起点(0,0)终点(100，100)
    grd.addColorStop(0, "black"); 
    grd.addColorStop(0.5, "red"); //渐变色的停止位置(0.0-1.0)和颜色
    grd.addColorStop(1, "white");
    ctx.fillStyle = grd; //填充样式设为渐变色
    ctx.fillRect(200, 200, 150, 80); //填充为矩形,位置、宽高
    ctx.strokeRect(200, 200, 150, 80);
    /*径向/圆渐变*/
    // createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
    var grd2 = ctx.createRadialGradient(75,275,10,100,300,100); 
    grd2.addColorStop(0, "red");
    grd2.addColorStop(1, "white");
    ctx.fillStyle = grd2;
    ctx.fillRect(0, 200, 150, 150);
    ctx.strokeRect(0, 200, 150, 150);
</script>