如何使用HTML5的Canvas图形元素绘制图形

如题所述

推荐答案 2017-06-13

1ãcanvasç»å¶ç©å½¢

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvasç»å¶ç©å½¢</title>
    <script type="text/javascript" src="canvas2.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

js:

/**
* Created by winson on 2016/9/11.
*/
function draw(id) {
    var canvas = document.getElementById(id);//ç¨getElementByIdè·åå°canvaså¯¹è±¡
    var context = canvas.getContext('2d');//åå¾ä¸ä¸æ
    context.fillStyle = "green";//ç»å¶èæ¯çé¢è²
    context.strokeStyle = "#fff";//ç»å¶è¾¹æ¡çé¢è²
    context.lineWidth = 5; //è®¾ç½®ç»ç¬å®½åº¦
    context.fillRect(0, 0, 400, 300);//ç»å¶
    context.strokeRect(50, 50, 180, 120);
}

温馨提示：答案为网友推荐，仅供参考

当前网址：http://00.wendadaohang.com/zd/DTD0rZT0IIBeDnernZ.html

相似回答

在HTML5的CANVAS上绘制椭圆的几种方法答：参数方程法该方法利用椭圆的参数方程来绘制椭圆//---用参数方程绘制椭圆---//函数的参数x,y为椭圆中心；a,b分别为椭圆横半轴、//纵半轴长度，不可同时为0//该方法的缺点是，当linWidth较宽，椭圆较扁时//椭圆内部长轴端较为尖锐，不平滑，效率较低function ParamEllipse(context, x, y, a, ...

Canvas怎么使用答：canvas元素只能作为图形的容器; 因此，我们应该使用JavaScript来渲染图形我们在Canvas上绘制图形，需要首先使用文档对象模型（DOM）进行目标定位。并且，使用id属性将帮助你识别匹配的目标位置。我们来看一个canvas元素的代码<canvas width="320" height="160" id="canvasExample"></canvas>Canvas元素允许两个...

如何使用HTML5 Canvas动态的绘制拓扑图答：<canvas> 标记在 Safari 1.3 中引入，在制作此参考页时，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，<canvas> 标记及其 API 可以使用位于excanvas点sourceforge点net的 ExplorerCanvas 开源项目来模拟。提示：如果希望学习如何使用 <canvas> 来绘制图形，可以访问 Mozilla 提供的Canvas ...

如何在 HTML5 画布上绘图答：步骤1: 在 HTML 中设置画布,创建一个引用,并获取上下文对象画布在 HTML 中通过 <canvas> 标签定义。与其他标签类似,<canvas> 的属性(如宽度和高度)作为特性输入。假设你希望创建一个宽 500 像素、高 500 像素的画布,并将其命名为“can1”,稍后在 JavaScript 中引用它时将用到。在HTML 文档中输入 <canvas...

大家正在搜

word如何绘制图形如何用ps画图形构成图形的基本元素有单形元素图形图形创意的三元素图形媒体元素的描述 ps怎么绘制图形 ps绘制图形元素图形