炫丽的倒计时效果Canvas绘图与动画基础_技术问答

蒹葭苍沧

搞定了，就是其中两块七巧板的颜色一样，这个就不知道怎么搞了？: 是的，这个单引号去掉后效果还是和原来一样; 2021-01-25 3回答·802浏览

蒹葭苍沧

图形一样，但就是没有颜色，求大神指点: 把你函数draw（）里面的for下面的{}删了，不带{}只执行cxt.lineTo(place.p[i].x,place.p[i].y);; 2021-01-22 5回答·976浏览

WANTEDss

七巧板对象: 太感谢了~; 2020-07-31 1回答·1065浏览

慕UI4193466

怎么在绘制出的矩形里加数字之类的？: https://www.w3school.com.cn/html5/canvas_filltext.asp
使用 fillText()，在画布上写文本 "Hello world!" 和 "w3school.com.cn"：; 2020-04-17 2回答·1087浏览

等待2062

按照老师的代码，绘制出来的却是这样

这个地方应该 cxt.lineTo(piece.p[i].x,piece.p[i].y);

2020-04-10 1回答·922浏览

孙哈哈Y

关于 stroke和fillStyle: 2020-04-03 2回答·637浏览

weixin_慕用5267334

为什么我的线条会超出我的画布,而且在街上中设置宽高没有用: 写在style里的样式影响里，style的width和height有px，window.onload里设置的宽高有加载顺序问题，最好写在标签上width='1024' height='768'。个人见解，有不同理解的可以多交流交流。; 2019-12-20 1回答·1126浏览

慕标2318052

用VS code 来学习时，发现很多方法无法“智能感知”

在你document获取canvas节点的方法上面加上备注：

/** @type {HTMLCanvasElement} */

2019-11-30 1回答·1146浏览

慕桂英850551

只显示了四个板块: canvas 宽高只有 600 ，绘制的数据坐标里 x,y 有800，显示区域不够，所以看不到。; 2019-06-05 3回答·1233浏览

qq_慕娘8074286

为什么我的window里面的内容全部没有显示: 试了下,没问题喔!!; 2019-04-06 4回答·1182浏览

慕仔1561325

closePath()并不是结束路径，而是闭合路径: 分析的没错，context.closePath()只是闭合之前的路径，context.beginPath()才是重新开始新的路径; 2019-01-27 1回答·1889浏览

qq_二疯子_0

为何无法显示出直线？

已采纳 qq_守护_29 的回答

document.getElementById('canvas')

你多写了个s

2018-11-19 2回答·1398浏览

只要干不死就往死里干

画布显示不出来，对照了几遍还是不知道错在哪里

去掉一个，

改成 piece.p[i]. y

2018-11-13 4回答·1620浏览

清_醒

不懂个别的差异: 一个是从0开始循环，一个是从1开始循环啊; 2018-11-07 1回答·1007浏览

慕设计521806

请问为什么显示不出来

function draw(nums,ctx){
        ctx.beginPath();
        ctx.moveTo(nums.p[0].x,nums.p[0].y);
        for(var i=1;i<nums.p.legth;i++){//  for(var i=1;i<nums.p.length;i++){
            ctx.lineTo(nums.p[i].x,nums.p[i].y);
        }
        ctx.closePath();
        ctx.fillStyle=nums.color;
        ctx.fill();
}

在上述代码中需要将nums.p.legth改为nums.p.length 单词拼写错误

2018-10-21 1回答·1204浏览

和你有个猿粪

为什么我合不起来: 因为你画到canvas画布外了，画布外的不显示。楼上说的设置宽高就能看到了。; 2018-09-13 2回答·1284浏览

大黑1997

需要数组的同学们: 么么哒，刚想找找看有没有现成的呢; 2018-08-17 3回答·992浏览

qq_佛祖也Crazy_0

为啥显示不出来求大神帮看看

i<piece.p.length

2018-08-12 1回答·1219浏览

慕粉1346445690

对象的属性值可以是数组吗？: 可以的; 2018-03-18 1回答·2030浏览

飞尘

数组中间缺少了什么

差不多就是这样一个，自己根尺寸算一下就好了。主要是理解js中的方法，以后也不是画七巧板啊。

var tangram = [
    {p: [{x: 0,y: 0}, {x: 400,y: 0}, {x: 200,y: 200}],color: '#caff67'},
    {p: [{x: 0,y: 0}, {x: 200,y: 200}, {x: 0,y: 400}],color: '#67becf'},
    {p: [{x: 400,y: 0}, {x: 400,y: 200}, {x: 300,y: 300}, {x: 300,y: 100}],color: '#ef3d61'},
    {p: [{x: 300,y: 100}, {x: 300,y: 300}, {x: 200,y: 200}],color: '#f9f51a'},
    {p: [{x: 200,y: 200}, {x: 300,y: 300}, {x: 200,y: 400}, {x: 100,y: 300}],color: '#a594c0'},
    {p: [{x: 100,y: 300}, {x: 200,y: 400}, {x: 0,y: 400}],color: '#fa8ecc'},
    {p: [{x: 400,y: 200}, {x: 400,y: 400}, {x: 200,y: 400}],color: '#f6ca29'}];

2018-01-16 1回答·1171浏览

等待2062

canvas绘画七巧板: 可以显示; 2017-12-26 2回答·1706浏览

菜鸟工程师

关于for的{}去掉才能显示效果的问题

我并没有去掉，但是照样可以呀

for ( var i=0;i<digit[num].length;i++) {
       for (var j=0;j<digit[num][i].length;j++) {
           if(digit[num][i][j] == 1){
               ctx.beginPath();
               ctx.arc((x+j*2*(RADIUS+1)+(RADIUS+1)),(y+i*2*(RADIUS+1)+(RADIUS+1)),RADIUS,0,2*Math.PI);
               ctx.strokeStyle = "#C91523";
               ctx.stroke();
               ctx.fill();
               ctx.closePath();

           }
       }
   }

2017-12-22 1回答·1223浏览

慕函数5127544

关于piece.p.length的问题: x坐标在每个对象里面，p应该是个数组吧，数组怎么访问p.x; 2017-11-15 1回答·1329浏览

慕函数5127544

关于线条与填充颜色的顺序问题

已采纳星光下的日出的回答

因为先描边后填充的话，填充色会将描边的内侧（假设你的linewidth=5，那么内侧的2.5）会被填充色所覆盖；

后描边的话就不会出现这样的问题啦。

——在老师的Canvas绘图讲解的2-4章中有详细的讲解。

2017-11-14 1回答·1678浏览

qq_虚幻的泡影_0

我的画不出来求各位大神帮忙看下: 打开控制台，看看报什么错？; 2017-10-25 1回答·1380浏览

qq那些年

不明白X轴Y轴的数值怎么得来的算的那么准

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>七巧板</title>
    <style type="text/css">
        #canvas {
            border: 1px solid #ccc;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>

<script type="text/javascript">
    var tangram = [
        {p: [{x: 0, y: 0}, {x: 400, y: 0}, {x: 200, y: 200}], color: "#ff0f09"},
        {p: [{x: 0, y: 0}, {x: 0, y: 400}, {x: 200, y: 200}], color: "#feff0a"},
        {p: [{x: 0, y: 400}, {x: 200, y: 400}, {x: 100, y: 300}], color: "#ff09f7"},
        {p: [{x: 100, y: 300}, {x: 200, y: 400}, {x: 300, y: 300},{x: 200, y: 200}], color: "#ffdc52"},
        {p: [{x:200,y:400}, {x:400,y:400}, {x:400,y:200}], color: "#0608ff"},
        {p: [{x:200,y:200}, {x:300,y:300}, {x:300,y:100}], color: "#30ff10"},
        {p: [{x:300,y:300}, {x:300,y:100}, {x:400,y:0}, {x:400,y:200}], color: "#ffa41a"},
    ];

    var canvas = document.getElementById("canvas"); // 获取canvas
 var context = canvas.getContext("2d");  // 获取2d绘图环境

 for (var i = 0; i < tangram.length; i++) {
        draw(tangram[i], context);
    }

    function draw(piece, context) {
        context.beginPath();

        context.closePath();

        context.moveTo(piece.p[0].x, piece.p[0].y);

        for (var i = 0; i < piece.p.length; i++) {
            context.lineTo(piece.p[i].x, piece.p[i].y);
        }

        context.fillStyle = piece.color;
        context.fill();
    }
</script>
</body>
</html>

2017-10-17 2回答·1255浏览