<html>

<head>

<title>canvas绘制图形</title>

    <style>

        body{

            margin: 0px;

            padding: 0px;

        }

        #mycanvas{

            border: 1px solid #9c9898;

        }

    </style>

    <script type=text/javascript >

        window.onload=function(){

            var  ca=document.getElementById("mycanvas");

            var context=ca.getContext("2d");

            context.fillStyle="#ff0000";

            context.fillRect(200,50,100,100);

        }

    </script>

<body>

    <canvas id ="mycanvas" width="500" height="200">

        浏览器不支持

    </canvas>

</body>

</head>

</html>

绘制直线：

<html>

<head>

<title>canvas绘制图形</title>

    <style>

        body{

            margin: 0px;

            padding: 0px;

        }

        #mycanvas{

            border: 1px solid #9c9898;

        }

    </style>

    <script type=text/javascript >

        window.onload=function(){

            var  ca=document.getElementById("mycanvas");

            var context=ca.getContext("2d");

            context.beginPath();

            context.moveTo(20, 220);

            context.lineTo(500,220);

            context.lineWidth=20;

            context.strokeStyle="#ff0000";

            context.stroke();

        }

    </script>

<body>

    <canvas id ="mycanvas" width="500" height="300">

        浏览器不支持

    </canvas>

</body>

</head>

</html>

绘制曲线

html 绘图的更多相关文章

  1. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  2. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  3. echarts+php+mysql 绘图实例

    最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...

  4. html5 canvas常用api总结(二)--绘图API

    canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API. 绘画的时候canvas相当于画布,而 ...

  5. HTML5_04之SVG绘图

    1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...

  6. HTML5 学习总结（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  7. AR创意分享：儿童涂鸦遇上程序绘图

    第一节 临摹 小明经常临摹同桌小美的画作. 美术课上,老师表扬了小美的新作. 图1.1 小美的作品<蒙娜·毛虫的微笑> 临,是照着原作画:摹,是用薄纸张蒙在原作上面画. 第二节 借画 小明 ...

  8. C# 一段绘图代码 在form_load事件不能显示图

    今天无意将一段绘图代码 写在form_load事件了,结果不能显示绘图.(代码:Graphics g = this.CreateGraphics();Pen pen = new Pen(Color.R ...

  9. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  10. Windows Form调用R进行绘图并显示

    R软件功能非常强大,可以很好的进行各类统计,并能输出图形.下面介绍一种R语言和C#进行通信的方法,并将R绘图结果显示到WinForm UI界面上. 1 前提准备 安装R软件,需要安装32位的R软件,6 ...

随机推荐

  1. 多线程编程-- part 9 信号量：Semaphore

    Semaphore简介 Semaphore是一个计数信号量,它的本质是一个"共享锁". 信号量维护了一个信号量许可集.线程可以通过调用acquire()来获取信号量的许可:当信号量 ...

  2. java中的compareto方法的详细介绍

    java中的compareto方法的详细介绍 Java Comparator接口实例讲解(抽象方法.常用静态/默认方法) 一.java中的compareto方法 1.返回参与比较的前后两个字符串的as ...

  3. vi 必须要学会的技能

    vi与vim vi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中的记事本一样,它的强大不逊色于任何最新的文本编辑器.他是我们使用Linux系统不能缺少的工具.由于对 ...

  4. plsql之导入数据乱码

     问题现象: 首先是使用了plsql 8.0版本客户端导入 ANSI as UTF-8 的字符集 格式sql 文件进行数据的导入, 然后检查了所有的系统环境的字符集和plsql 的字符集 都OK 的但 ...

  5. 高性能mysql 第7章 mysql高级特性之分区表

    分区表: 分区表是一个独立的逻辑表,底层通过多个物理表实现. mysql实现分区表的方式是对底层表的封装.这意味着没有全局索引,索引是建立在底层的每个表上的(跟ORACLE不一样). 用到分区表的几种 ...

  6. 【The 13th Chinese Northeast Collegiate Programming Contest H 题】

    题目大意:NOIP2018d1t1 支持 M 次区间查询答案和区间修改操作. 题解: 首先考虑不带区间修改的情况.从左到右进行考虑,发现对于第 i 个数来说,对答案的贡献仅仅取决于第 i-1 个数的大 ...

  7. 前端面试题-display:none和visibility:hidden的区别

    一.display:none和visibility:hidden的区别 1.1 空间占据 1.2 回流和渲染 1.3 株连性 二.空间占据 display:none 隐藏后的元素不占据任何空间,而 v ...

  8. 【转】linux中fork（）函数详解

    原文链接:http://blog.csdn.net/jason314/article/details/5640969#comments 总结:面宝P268 fork()的意思是进程从这里开始分叉,分成 ...

  9. Python 面向对象Ⅲ

    Python内置类属性 __dict__ : 类的属性(包含一个字典,由类的数据属性组成) __doc__ :类的文档字符串 __name__: 类名 __module__: 类定义所在的模块http ...

  10. 在CentOS/Windows下配置Nginx（以及踩坑）

    在CentOS/Windows下配置Nginx(以及踩坑) 1. 序言 因为这类文章网上比较多,实际操作起来也大同小异,所以我并不会着重于详细配置方面,而是将我配置时踩的坑写出来. 2. CentOS ...