<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. 利用python3 调用zabbix接口完成批量加聚合图形（screens)

    在上一篇博客中,我们完成的利用python3 调用zabbix接口批量增加主机,增加主机的item,增加主机的图形! 接下来我们完成批量增加主机的screen 首先我们要增加screen需要哪些参数呢 ...

  2. win7-32位安装mysql-5.7.27

    下载 https://dev.mysql.com/downloads/mysql/5.7.html#downloads 参考链接 https://blog.csdn.net/qq_41307443/a ...

  3. ActiveMQ基础01——Linux下载安装ActiveMQ

    1.下载 下载地址:http://activemq.apache.org/ 点击按钮 下载Linux下最新版安装包,点击即可下载 2.安装ActiveMQ 将之前下载的安装包上传到linux当中,一般 ...

  4. PHP7安装redis扩展

    PHP7安装redis扩展优秀开源项目:http://github.crmeb.net/u/liaofeiyum -y install git git clone https://github.com ...

  5. centos6.8 上传文件到amazon s3

    centos6.8 上传文件到amazon s3 0.参考 AWS CLI Cinnabd Reference Possible to sync a single file with aws s3 s ...

  6. centos8 网卡命令(centos7也可用)

    nmcli n 查看nmcli状态 nmcli n on 启动nmcli nmcli c  up eth0 启动网卡eth0 nmcli c down eth0 关闭网卡eth0 nmcli d c ...

  7. 模拟赛小结：2017-2018 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2017)

    比赛链接:传送门 本场我们队过的题感觉算法都挺简单的,不知道为啥做的时候感觉没有很顺利. 封榜后7题,罚时1015.第一次模拟赛金,虽然是北欧的区域赛,但还是有点开心的. Problem B Best ...

  8. Windows10永久激活的工具

    最近发现一个很好用的Windows10 永久激活的工具,比KMS什么的管用,而且无毒无公害.几乎支持所有的win10版本.感兴趣的朋友可以试试.之前win10没洗白的同学,也试试吧,说不定就洗白了呢. ...

  9. Java事务（转载）

    Java事务的类型有三种:JDBC事务.JTA(Java Transaction API)事务.容器事务. 1.JDBC事务 JDBC 事务是用 Connection 对象控制的.JDBC Conne ...

  10. [LeetCode 92] Reverse Linked List II 翻转单链表II

    对于链表的问题,根据以往的经验一般都是要建一个dummy node,连上原链表的头结点,这样的话就算头结点变动了,我们还可以通过dummy->next来获得新链表的头结点.这道题的要求是只通过一 ...