canvas css标签 html5

vancas作为css元素选择器显示不出来样式为什么，代码如下
<!DOCTYPE html>

不准删除

*{margin:0;}<!----解决兼容性问题---->
#canvas{
background:red;
margin:100px auto;
display:block;
border:10px soild #c1ba84;
}
p
{
background-color:yellow;
}



不支持
  <script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var width=15;
    context.moveTo(0,0);
    context.lineTo(450,450);
    context.stroke();
    for(var i=0;i<30;i++){
        context.moveTo(i*width,0);
        context.lineTo(i*width,450);
        context.stroke();
        context.moveTo(0,i*width);
        context.lineTo(450,i*width);
        context.stroke();
    }
    //定义社长为6
    var snakeCount = 6;
    var snake = [];
    //初始化社的坐标
  </script>


有报错输出吗，或者调试出来的啥东西

你都没有在body中添加canvas标签
你试试在body中加上
就没问题了

把你的修改了下，代码如下
<!DOCTYPE html>

*{margin:0;} #canvas{ background:red; margin:100px auto; display:block; border:10px soild #c1ba84; } p{ background-color:yellow; }


<!-- 加上这一句 -->
<br> var canvas = document.getElementById(&quot;canvas&quot;);<br> var context = canvas.getContext(&quot;2d&quot;);<br> var width=15;<br> context.moveTo(0,0);<br> context.lineTo(450,450);<br> context.stroke();<br> for(var i=0;i<30;i++){<br> context.moveTo(i*width,0);<br> context.lineTo(i*width,450);<br> context.stroke();<br> context.moveTo(0,i*width);<br> context.lineTo(450,i*width);<br> context.stroke();<br> }<br> //定义社长为6<br> var snakeCount = 6;<br> var snake = [];<br> //初始化社的坐标<br>

把你的修改了下，代码如下
<!DOCTYPE html>
*{margin:0;} #canvas{ background:red; margin:100px auto; display:block; border:10px soild #c1ba84; } p{ background-color:yellow; }


var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width=15;
context.moveTo(0,0);
context.lineTo(450,450);
context.stroke();
for(var i=0;i context.moveTo(i*width,0);
context.lineTo(i*width,450);
context.stroke();
context.moveTo(0,i*width);
context.lineTo(450,i*width);
context.stroke();
}
//定义社长为6
var snakeCount = 6;
var snake = [];
//初始化社的坐标

canvas样式一般直接写在标签上吧