<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. deep_learning_Function_tensorflow_random_normal_initializer

    函数原型:tf.random_normal_initializer(mean=0.0, stddev=1.0, seed=None, dtype=tf.float32) 返回一个生成具有正态分布的张量 ...

  2. linux centos 7安装 apache php 及mariadb

    1安装Apache, PHP, MySQL以及php库组件. yum -y install httpd php mysql  php-mysql 2 安装apache扩展 yum -y install ...

  3. yum 报错3

    . Contact the upstream for the repository and get them to fix the problem. . Reconfigure the baseurl ...

  4. eclipse查看jsp出现failed to create the part's controls的解决方法

    问题描述 最近eclipse出现了一下问题,某个类无法打开,显示Failed to create the part’s controls ,如图: 问题解决 安装的JDK 版本估计有冲突导致IDE出现 ...

  5. libusb读写

    https://blog.csdn.net/u012247418/article/details/83684980 https://github.com/crazybaoli/libusb-test ...

  6. java调用js函数

    问题:js函数可能有多个,之间有相互调用关系,有jquery jar包 org.mozilla.javascript-1.7.2 js   envjs-1.2.js java代码 import jav ...

  7. Mongodb的mapreduce

    简单的看了一下mapreduce,我尝试不看详细的api去做一个group效果,结果遇到了很多问题,罗列在这里,如果别人也遇到了类似的bug,可以检索到结果. //先看person表的数据 > ...

  8. 【洛谷P2915】Mixed Up Cows

    题目大意:给定一个长度为 N 的序列,每个位置有一个权值,现要求重新排列这个序列,使得相邻的权值差的绝对值大于 K,求合法排列的方案数. 题解: 由于 N 很小,应该可以想到状压,考虑如何进行设计状态 ...

  9. 【winfrom-右击快捷菜单】右击或左击时显示快捷菜单

    拖个contextMenuStrip控件 按钮的MouseDown事件: private void treeView1_MouseDown(object sender, MouseEventArgs ...

  10. JavaScript 正则表达式——预定义类，边界，量词，贪婪模式，非贪婪模式，分组，前瞻

    ㈠预定义类    示例:匹配一个ab+数字+任意字符的字符串:ab\d.   ㈡边界 正则表达式常用的边界匹配字符   ⑴示例1:第一个是没写单词边界             第二个是加上字符边界的效 ...