LL_liiiii
2017-08-19 05:42
采纳率: 0%
浏览 3.5k

用<canvas>标签绘制图形浏览器显示不出来

代码如下：

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
    <script type="application/javascript">
        function draw(){
            var canvas=document.getElementById('canvas');
            if(canvas.getContext){
                var ctx=canvas.getContext("2d");
                for(var i=0;i<2;i++){
                    for(var j=0;j<3;j++){
                        ctx.beginPath();
                        var x=10+j*30;
                        var y=10+i*30;
                        var radius=10;
                        var stratAngle=0;
                        var endAngle=Math.PI+(Math.PI*j)/2;
                        var anticlockwise=false;
                        ctx.arc(x,y,raidus,stratAngle,endAngle,anticlockwise);
                        ctx.stroke();
                    }               
                }
            }
        }


    </script>
</head>
<body onload="draw()">
<canvas id="canvas" width="200" height="200"></canvas>
</body>
</html>

我还找了另一个例子，照着敲的也显示不出来

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • raidus没有定义

    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function draw(){
            var canvas = document.getElementById('canvas');
            var raidus=20///////////////////
            if(canvas.getContext){
                var ctx=canvas.getContext("2d");
                for(var i=0;i<2;i++){
                    for(var j=0;j<3;j++){
                        ctx.beginPath();
                        var x=10+j*30;
                        var y=10+i*30;
                        var radius=10;
                        var stratAngle=0;
                        var endAngle=Math.PI+(Math.PI*j)/2;
                        var anticlockwise=false;
                        ctx.arc(x,y,raidus,stratAngle,endAngle,anticlockwise);
                        ctx.stroke();
                    }
                }
            }
        }


    </script>
</head>
<body onload="draw()">
    <canvas id="canvas" width="200" height="200"></canvas>
</body>
</html>
    评论
    解决 无用
    打赏 举报

报告相同问题？

提交

相关推荐 更多相似问题

  • 在<canvas>标签中绘制的图形无法正常显示 html5
    2017-06-26 13:55
    回答 2 已采纳 ![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/6.gif)马上就贴，麻烦大神指教![图片](http
  • html <canvas>标签的使用 html5
    2015-11-05 13:13
    回答 1 已采纳 因为你translate移动画布中心，clearRect时以移动过的中心开始计算，不再是右上角，导致无法清空右上角的内容。 改这样，反向一下 ``` oGC.clearRect(
  • 用<canvas>做钟表的问题 html5
    2016-01-18 11:52
    回答 3 已采纳 cxt.restor();应为cxt.restore();
  • html5中canvas标签,html5中<canvas>标签的具体用法详解
    2021-06-28 04:42
    weixin_39666496的博客 canvas是HTML5中新定义的标签，顾名思义，它本身是一个画布标签，没有自己的行为，只是一个图形容器，必须使用脚本来绘制图形。下面是它用法的示例：Your browser does not support HTML5 Canvas.从上述代...
  • <canvas>标签
    2017-12-09 19:17
    13-c的博客 标签只是容器，必须使用脚本来绘制图形。 2、fillStyle在fillRect()之后无效，只会显示默认颜色（#000000）。 3、&lt;canvas&gt;标签width默认值300，height默认值150。 4、重设&lt;canvas&gt; ...
  • HTML ＜canvas＞标签
    2021-12-09 14:43
    牧云的少年的博客 其元素本身只是图形容器没有绘制功能（他仅仅是图形的容器）其必须要使用脚本绘制图形<canvas> 标签是 HTML 5 中的新标签。 注：IE 8 或更早的浏览器不支持<canvas>元素 创建和渲染路径 画布的一项...
  • 我应该放弃Adobe Flash for HTML5和<canvas>吗？ actionscriptfacebookhtml5php
    2010-04-29 22:47
    回答 9 已采纳 HTML5 doesn't truly exist yet outside of the basic support in the various browsers. We're a coupl
  • WPF如何动态绑定List<string>到ListBox c#wpf
    2021-11-15 16:16
    回答 1 已采纳 来帮助你了，这个list没有通知到UI可以试试换个数据结构比如bindinglist和observablecollection
  • canvas如何响应鼠标事件删除不规则图形
    2016-02-17 14:18
    回答 2 已采纳 思路都有了，你自己试试不就知道了。。还不如直接清空整个画布，然后重绘其他不在点击范围内的图形
  • （25）HTML5之＜canvas＞和＜svg＞标签
    2021-12-20 11:59
    泽哥ins的博客 Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。 一、SVG SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 ...
  • HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)
    2014-07-24 14:39
    weixin_30522183的博客 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素 向 HTML5 页面添加 ...
  • Html画布w3c,HTML <canvas> 标签
    2021-06-17 11:08
    weixin_39872624的博客 实例通过 元素来显示一个红色的矩形：var canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);尝试一下 »浏览器支持IE 9、Firefox、...
  • H5 canvas多次重复画图后 ,位置不是第一次开始的位置 html5
    2017-11-02 05:54
    回答 1 已采纳 //获取对应的CanvasRenderingContext2D对象(画笔) var ctx = canvas.getContext("2d"); //圆弧的旋转角度,顺时针负增长,逆时针正增长
  • canvas css标签 html5 html5
    2017-12-09 11:03
    回答 5 已采纳 有报错输出吗，或者调试出来的啥东西
  • html5 canvas 绘制base64图片失败 html5
    2016-11-30 19:03
    回答 1 已采纳 ``` var imggg = new Image(); imggg.onload=function(){///////////放onload中试试 canvas2Context.dr
  • HTML5 的<canvas>标签
    2016-12-08 14:35
    skye iOS????的博客 标签只是图形容器，您必须使用脚本来绘制图形。 设置css样式： <style type="text/css"> canvas{background: #c0c0c0} </style>您的浏览器暂不支持Html5的canvas元素,因为版本过低。<canvas id="mycanvas" width=...
  • HTML 5 <canvas> 标签 用法
    2016-07-26 22:39
    QC班长的博客 标签只是图形容器，您必须使用脚本来绘制图形。 实例 如何通过 canvas 元素来显示一个红色的矩形： var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ...
  • <canvas>标签的一些应用
    2019-05-07 17:38
    weixin_30387339的博客 最近刚接触到<canvas>标签，虽然知道它可以对像素进行一些处理，但却想不出实战中能做点什么...　注意：使用跟ImageData对象相关的功能的时候，Chrome本地运行会出现跨域的问题，导致JS代码不生效。有一个解决...
  • 统计页面 - 逐个加载每个统计信息<div> jqueryphp
    2015-08-11 12:34
    回答 1 已采纳 You need to Move / copy the block you have in your $(document).ready above into your AJAX callb
  • canvas标签
    2018-05-17 22:54
    柳LL的博客 1.canvas标签描述：用来“替代”flash等其他用于做...（2）canvas标签由于是新标签，并不是所有的浏览器都支持、 需要在canvas标签内添加提示性文本&lt;canvas&gt;您的浏览器不支持&lt;/canvas&gt;...
  • 没有解决我的问题, 去提问