<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. 问题:tomcat启动后，可以访问主页面，但是无法访问dubbo-admin

    原因分析: 直接查看logs中的日志文件,发现一行 [Catalina-utility-1] org.apache.catalina.startup.HostConfig.undeploy Undep ...

  2. win7下CodeIgniter安装

    一.CodeIgniter是什么 CodeIgniter 是一套给 PHP 网站开发者使用的应用程序开发框架和工具包. 它的目标是让你能够更快速的开发,它提供了日常任务中所需的大量类库, 以及简单的接 ...

  3. 关于fastJson的几个问题

    1.将对象中为null的属性也给序列化出来 可以使用SerializaerFeature实现 JSON.toJSONString(gas, SerializerFeature.WriteMapNull ...

  4. 如何卸载rpm

    首先通过  rpm -q <关键字> 可以查询到rpm包的名字 或者rpm -qa|grep 关键字 然后 调用 rpm -e <包的名字> 删除特定rpm包 如果遇到依赖,无 ...

  5. centos 7 安装 Oracle 12c

    #!/bin/bash #!/usr/bin/expect -f #/etc/sysctl.conf --bash-srcipts-- echo 'net.ipv6.conf.all.disable_ ...

  6. HackIM web关writeup

    Web100 访问页面将看到下面的错误 在burp里使用request / response查看有没有什么不正常的地方.如下图所示,在返回的数据包里被设置了两次不同的PHPSESSID. 如果我把PH ...

  7. kubesphere集群搭建(多节点)

    kubesphere官网:https://kubesphere.io/docs/advanced-v2.0/zh-CN/introduction/intro/ 一.准备环境 1.准备服务器 maste ...

  8. python用jdbc读取oracle表和列的信息，生成java代码

    这个项目的地址 传送门 第一个python3项目,对python 还是学习中,请大佬轻喷,欢迎指点 import jaydebeapi from .database import Database d ...

  9. vm安装ubantu的详细过程（转载）

    这里转载一个非常实用的vm虚拟机安装linux系统的文章有需要的可以看下面链接: https://blog.csdn.net/u013142781/article/details/50529030

  10. SpringBoot 在IDEA中实现热部署(实用版)（引入）

    SpringBoot 在IDEA中实现热部署(实用版) 引用:https://www.jianshu.com/p/f658fed35786 好的热部署让开发调试事半功倍,这样的“神技能”怎么能错过呢, ...