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>


5个回答

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

你都没有在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样式一般直接写在标签上吧

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
HTML5之canvas标签(上)
现在HTML5备受关注,其中它新增的一些标签感觉战斗力爆棚哈。本章就主要介绍下HTML5的canvas标签,希望能给初学者有所帮助。大家共同学习。canvas元素就是画布,就是通过该元素结合javascrtpt可以在网页上绘制各种图形,甚至制作各种酷炫动画,以及一些小游戏。下面我就从canvas最基础的地方,来讲解有关canvas的各种属性,好了,下面开启打怪升级的道路。 首先我们先定义一个画布<c
Html5 Canvas标签
希望对你的html5学习有帮助,很容易看懂的,html5是另一种希望。
HTML5 Canvas标签总结
var c = document.getElementById("myCanvas"); var context = c.getContext("2d"); 填充的矩形: context.fillStyle = "#ff00ff";  //填充颜色 context.fillRect( x , y , width , height ); 画直线:
html5:<canvas>标签实现动态效果
new document         var canvas =document.getElementById('canvas'); var context=canvas.getContext('2d'); var x=-300; //八卦 context.translate(canvas.width/2,canvas.height/2); setInt
小白入门---HTML5标签canvas
HTML5标签canvas1、canvas简介 1、canvas: * >做游戏:白鹭引擎、trees…; * >做动画;做动态图表,频谱;画图… * HTML5不是单纯的html * canvas本身是一个标签,是一个空白的画布,默认是300*150的宽高 * 本身有宽高的属性,不需要使用CSS去设置,如果非要设置,一定要和canvas的宽高设置相同,不
HTML5新标签canvas教程
在这里给大家介绍关于HTML5新标签的使用,&lt;canvas&gt;标签在w3c官网的介绍是画布,用于绘制图像。然而canvas没有绘制图像的能力,仅仅只是一个容器,他需要通过脚本,通常是熟知的JavaScript来完成实际的绘制图像的任务 在开始之前,介绍一下关于&lt;canvas&gt;的作用,大家小时候一定玩过4399或者7k7k,很多是需要装一个叫flash的插件,而&lt;ca...
HTML5图形绘画标签canvas
<span style="font-size:14px;">详细讲解HTML5CSS3新增特性,web本地储存、canvas绘图、结构元素、精灵图片使用</span><br />rn<p>rn <span style="font-size:14px;">边框盒阴影、第三方字体引入、CSS3动画及过渡特效、flex弹性布局,仿美团首页项目实战</span> rn</p>rn<p>rn <span style="font-size:14px;"><br />rn</span> rn</p>rn<p>rn <br />rn</p>rn<p>rn <br />rn</p>rn<p>rn <span style="color:#262626;font-size:14pt;"><span style="font-size:14px;">课程版本:这是一套讲解</span><span style="font-size:14px;">HTML5及CSS3新增特性的视频教程,2019年7月份录制完成,本套课程分为7章38节。</span></span><span style="font-size:10.5pt;"></span> rn</p>rn<p>rn <span><span style="font-size:14px;">核心内容</span></span><span style="font-size:10.5pt;"></span> rn</p>rn<p>rn <span>1.</span><span style="color:#262626;font-size:14pt;"><span style="font-size:14px;">讲解</span><span style="font-size:14px;">HTML5及CSS3新增特性</span></span><span style="font-size:10.5pt;"></span> rn</p>rn<p>rn <span>2.</span><span>web本地储存以及三大存储方式的区别</span><span style="color:#262626;font-size:14pt;"></span> rn</p>rn<p>rn <span>3.</span><span style="color:#262626;font-size:14pt;"><span style="font-size:14px;">如何使用精灵图片以及</span><span style="font-size:14px;">css3特效</span></span><span style="font-size:10.5pt;"></span> rn</p>rn<p>rn <span>4.</span><span style="color:#262626;font-size:14pt;"><span style="font-size:14px;">分析</span><span style="font-size:14px;">flex布局的六大容器属性和六大项目属性</span></span><span style="font-size:10.5pt;"></span> rn</p>rn<p>rn <span>5.</span><span style="color:#262626;font-size:14pt;"><span style="font-size:14px;">详细讲解</span><span style="font-size:14px;">flex布局搭配项目实战</span></span><span style="font-size:10.5pt;"></span> rn</p>rn<p>rn <span>6.</span><span>HTML5CSS3的一些常见面试题</span><span style="font-size:10.5pt;"></span> rn</p>rn<p>rn <span style="font-size:14px;">&nbsp;</span> rn</p>
HTML5的标签和CSS层叠样式
HTML5中input标签所增加的属性 1、placeholder:提示属性列如:     2、pattern:简单的正则列如:     3、Email:输写邮箱的列如:     4、number:输写数字的,min代表输入的最小的数,max代表输入最大的数例如:     5、在input里可以选择文字也可以输入文字的框例如:                            
html5 Canvas标签(画布)字体原地旋转
在canvas上任意一个地方fillText了一段文字,然后想让这段文字原地旋转角度,可以实现么?rn用rotate旋转的话,是围绕(0,0)点旋转的,我想要的效果是围绕文字的起始坐标点进行旋转。。。rn求大神解决,非常感谢!
HTML5新增标签--canvas之绘制火柴人
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt;     &amp;lt;head&amp;gt;         &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt;         &amp;lt;title&amp;gt;绘制火柴人&amp;lt;/title&amp;gt;         &amp;lt;style&amp;gt;             body{                 wi
HTML5 canvas标签-4 灰度直方图的实现
图像分析中,灰度直方图是相当有实用价值的东西 制作灰度直方图 首先需要把图片灰度化  详细内容见上一个章节 接下来把数组里每个灰度值出现的次数统计下来 最后进行绘图就可以了 function getHistogram(imgData){ //先灰度化 var data = imgData,detailArr = [],heightOfCanvas =
Html5新元素<canvas>标签画图注意事项
一:使用Html5新元素标签画图注意事项 js代码要放在标签的后面,比如可以放到的结束标签后面!!! 如果放在前面,js代码是不能正常执行的。
html5 Canvas标签结合Jquery的时钟
Canvas功能非常强大,就是网页画笔,个人也就简单的尝试,用它结合Jquery,做了一个简单的时钟,显示时、分、秒。
让IE兼容 HTML5的canvas标签
让IE兼容 HTML5的canvas标签 excanvas的文件
HTML5 canvas标签-5 浮雕算法
浮雕算法,顾名思义,就是将图像变成类似石头雕塑的算法 (来源于百度) 这就是一个浮雕 我们看看它的特点 首先颜色整体 偏灰(上一篇博客中说过,在RGB中,R=G=B时便是灰色) 其次就是层次分明。 所以根据上述这两点,我们代码首先需要找出图片边界,其次把图片整体变灰。 其实找出边界很简单。就是比较相邻两点的RGB值。如果他们差异很大便说明这边有颜色剧烈的变化。 所以最简洁的办法就是
HTML5中video标签与canvas绘图的使用
原文:https://www.cnblogs.com/zhuzhenwei918/p/6822834.html video标签的使用   video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档):    domo01 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta...
HTML5 canvas个人标签图代码.zip
HTML5 canvas个人标签图代码,生成个人标签,标签云代码,标签图样式。
HTML5运用canvas标签画椭圆
画出一个椭圆 //获取画布 var canvas = document.getElementById(&quot;can1&quot;); //获取画笔 var cxt = canvas.getContext(&quot;2d&quot;); cxt.beginPath(); //设置填充颜色 cxt.fillStyle = &quot;red&quot;; var a=...
HTML5新增标签--canvas之绘制矩形
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt;     &amp;lt;head&amp;gt;         &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt;         &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt;         &amp;lt;style&amp;gt;             body{                 width:
HTML5新增标签--canvas之绘制小方块运动
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt;     &amp;lt;head&amp;gt;         &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt;         &amp;lt;title&amp;gt;小方块运动&amp;lt;/title&amp;gt;         &amp;lt;style&amp;gt;             body{                 wi
HTML5绘图之Canvas标签 绘制坐标轴
因为最近在做数据的统计,需要表现在网页上 也查过一些插件和一些绘图语言,学习时间成本太高,所以用上了HTML5的Canvas标签和JavaScript,可以很快的满足我需要的绘图需求JavaScript中前两句: var canvas1=document.getElementById(“canvas1”); var context=canvas1.getContext(“2d”); 第一句获取
html5使用canvas标签绘制简单的时钟
源代码如下: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; window.onload=func
Html5 canvas标签实现简易画图板
* { margin: 0; padding: 0; } .zt { width: 600px; height: 600px; border: solid 4px rgba(0, 0, 0, 0.67); margin-le
用html5中canvas标签写个贪吃蛇
沙舟狼客制作 <!-- body{ margin:0 auto; background:#6699FF; width:960px; height:800px; } nav{ width:960px; height:50px; float:left; } canvas { border: thick solid #000000; width:5
HTML5(四).画布Canvas标签详解
[align=center][b][size=large]什么是 Canvas?[/size][/b][/align] HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 [b][size=small]创建 Canvas 元素[/siz...
HTML5新增标签--canvas之绘制圆形
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt;     &amp;lt;head&amp;gt;         &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt;         &amp;lt;title&amp;gt;绘制圆形&amp;lt;/title&amp;gt;         &amp;lt;style&amp;gt;             body{                 wid
HTML5新增标签--canvas之绘制三角形
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt;     &amp;lt;head&amp;gt;         &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt;         &amp;lt;title&amp;gt;绘制三角形&amp;lt;/title&amp;gt;         &amp;lt;style&amp;gt;             body {                 
【HTML5 canvas】关于canvas标签的理解和简单应用
canvas标签只是图形容器,我们必须使用脚本来绘制图形自己边练习简单案例边学习:HTML部分:<canvas id="myCanvas" width="1000" height="500"></canvas> 属性:width、height规定画布的宽高 绘制图形部分则需要JavaScript操作javascript部分1、绘制矩形<script type="text/javascript">
html5之canvas
<canvas> 是一个新的 HTML 元素,这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作,也可以用来做一些动画。这个文档中有详细的canvas的应用实例,函数解释。
HTML5 Canvas
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
【HTML5】——Canvas
Canvas是HTML5中所有新特性中目前应用最广泛的一个,可以替代引入的图片(图形) 用途:完成HTML页面中的图形绘制,实现网络游戏或单击游戏(网页游戏),在HTML中绘制图标 目前主流的游戏引擎:白鹭引擎、Cocos注意:Canvas作为HTML页面的元素出现,在Canvas绘制的图形与HTML页面是无关的,即不能使用DOM和事件绑定目录1.Canvas元素 2.绘制矩形 3.填充、描
HTML5 CANVAS
HTML5 CANVAS 绘图, 图形的旋转,变化
html5 canvas
我用canvas画了个矩形rnvar canvas=document.getElementById("myCanvas");rn var context=canvas.getContext("2d");rn context.strokeStyle="orange";rn context.strokeRect(0, 0, 90, 90);rnrn应该宽和高都一样,是个正方形的啊,为什么我在浏览器上显示是个矩形(高比宽大很多)。而且我用clientX和clientY取出的数据和90比差很多。求高手解释!
html5——canvas
html5实现一个倒计时种,使用canvas绘图试下。
canvas标签
定义图形,比如图表和其他图像。 标签只是图形容器(画布),必须使用脚本来绘制图形。  <script type="text/javascript">  var canvas=document.getElementById('myCanvas');  var ctx=canvas.getContext('2d');  ctx.fillStyle='#FF0000';  ctx.fill
Canvas标签
Canvas标签 canvas是HTML5中新加的标签和和操作js的API,它可以在网页中完成2d和3d动态创建,可以完成动画,游戏,图表等功能。 创建canvas &amp;lt;canvas id=&quot;can&quot;&amp;gt;&amp;lt;/canvas&amp;gt; 获取canvas var can=document.getElementById(&quot;can&quot;); 获取可视屏幕的宽和高 var window_w=doc...
[HTML5] HTML5 Canvas 基础教程 (英文版)
☆ 资源说明:☆ [friendsofED] HTML5 Canvas 基础教程 (英文版) [friendsofED] Foundation HTML5 Canvas For Games and Entertainment (E-Book) ☆ 出版信息:☆ [作者信息] Rob Hawkes [出版机构] friendsofED [出版日期] 2011年04月11日 [图书页数] 316页 [图书语言] 英语 [图书格式] PDF 格式
canvas标签设长宽是在css中还是在标签中
最近看到HTML5 的canvas标签的时候发现,如果用css来控制canvas的长度和宽度与在canvas标签内进行控制得到的结果是不同的。在canvas默认情况下,canvas元素的长度是300px,宽度是150px。如果此时在canvas标签内画了图,进行css控制canvas的长宽时,发现canvas标签内的图画会按照你在css的width和height的变化情况而变化。例如原本width
CSS/HTML/HTML5基本标签及属性——01
1.网站开发:  设计:美工  前端技术:HTML/JS/jQuery     后端技术:C# (java/php)  数据库技术:SqlSever/MySql  服务器技术:上线2.HTML发展历史:  html1.0  html2.0 html3.0 html4.0 html4.0.1  xhtml1.0  html5   1.页面特效融入较多 绚烂   2.引入了很多语义化标签   3.融入...
CSS/HTML/HTML5基本标签及属性——02
HTML基本标签: 1.表单元素:接收用户在浏览器上输入数据,提交给后台处理页面   语法:    &amp;lt;form action=&quot;页面提交地址&quot; method=&quot;提交方式&quot;&amp;gt;     一堆表单元素    &amp;lt;/form&amp;gt;    action:后台程序的处理页面    method:get/post   表单元素:     属性: name 名称 value值       文本框...
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法