1. <html>
  2. <head>
  3. <title>canvas绘制图形</title>
  4.     <style>
  5.         body{
  6.             margin: 0px;
  7.             padding: 0px;
  8.         }
  9.         #mycanvas{
  10.             border: 1px solid #9c9898;
  11.  
  12.         }
  13.  
  14.     </style>
  15.     <script type=text/javascript >
  16.         window.onload=function(){
  17.             var  ca=document.getElementById("mycanvas");
  18.             var context=ca.getContext("2d");
  19.             context.fillStyle="#ff0000";
  20.             context.fillRect(200,50,100,100);
  21.  
  22.         }
  23.     </script>
  24. <body>
  25.     <canvas id ="mycanvas" width="500" height="200">
  26.         浏览器不支持
  27.     </canvas>
  28. </body>
  29. </head>
  30. </html>

绘制直线：

  1. <html>
  2. <head>
  3. <title>canvas绘制图形</title>
  4.     <style>
  5.         body{
  6.             margin: 0px;
  7.             padding: 0px;
  8.         }
  9.         #mycanvas{
  10.             border: 1px solid #9c9898;
  11.  
  12.         }
  13.  
  14.     </style>
  15.     <script type=text/javascript >
  16.         window.onload=function(){
  17.             var  ca=document.getElementById("mycanvas");
  18.             var context=ca.getContext("2d");
  19.             context.beginPath();
  20.             context.moveTo(20, 220);
  21.             context.lineTo(500,220);
  22.             context.lineWidth=20;
  23.             context.strokeStyle="#ff0000";
  24.             context.stroke();
  25.  
  26.         }
  27.     </script>
  28. <body>
  29.     <canvas id ="mycanvas" width="500" height="300">
  30.         浏览器不支持
  31.     </canvas>
  32. </body>
  33. </head>
  34. </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. Linux下部署Kafka分布式集群，安装与测试

    注意:部署Kafka之前先部署环境JAVA.Zookeeper 准备三台CentOS_6.5_x64服务器,分别是:IP: 192.168.0.249 dbTest249 Kafka IP: 192. ...

  2. 31、NTP时间服务器

    1.NTP简介 NTP服务器顾名思义就是时间同步服务器(Network Time Protocol),Linux下的ntp服务器配置相对来说都比较容易,但在Linux下有一个弊端,不同时区或者说是时间 ...

  3. 18、nginx优化

    一.性能优化概述 基询imm能优化,那么在性能优化这一章,我们将分为如下几个方面做介绍 1.首先我们需要了解性能优化要考虑哪些方面. 2.然后我们需要了解性能优化必须要用到的压力测试工具ab. 3.最 ...

  4. linux上如何安装postgresql

    安装对应的postgresql的yum源 rpm -Uvh https://download.postgresql.org/pub/repos/yum/9.4/redhat/rhel-7-x86_64 ...

  5. (转)oracle使用expdp、impdp和exp、imp导入导出表及表结构

    使用expdp.impdp和exp.imp时应该注重的事项: 1.exp和imp是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用. 2.expdp和impdp是服务端的工具程序,他们只能在 ...

  6. 〇——HTML的本质以及在Web程序中的作用

    对于所有的Web应用,其实本质上都是一个socket服务端,用户的浏览器就是一个socket的client,我们看看下面这段代码 import socket def handle_request(cl ...

  7. 第五章 动画 48：动画-使用transition-group元素实例列表动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. vsftpd启动报错:vsftpd：500 OOPS: bad bool value in config file for: anonymous_enable

    vsftpd启动报错:vsftpd:500 OOPS: bad bool value in config file for: anonymous_enable  今天在调试centos vsftp的时 ...

  9. 高性能mysql 第11章 可扩展的mysql

    可扩展性的定义:当增加资源以获得执行更多的工作系统能获得划算的同等提升. 向上扩展(垂直扩展):提升服务器的硬件性能. 向外扩展(水平扩展):一般都是复制,拆分,数据分片(sharding). 复制: ...

  10. <label>标签的相关内容

    ㈠<label>标签的定义与用法 ⑴<label> 标签为 input 元素定义标注(标记). ⑵label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如 ...