<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. 超详细思路讲解SQL语句的查询实现，及数据的创建。

    最近一直在看数据库方面的问题,总结了一下SQL语句,这是部分详细的SQL问题,思路讲解: 第一步:创建数据库表,及插入数据信息 --Student(S#,Sname,Sage,Ssex) 学生表 CR ...

  2. MSSQL日期分组排序

    等于今天日期的排上面,大于今天的排中间,小于今天的排下面,带分页.

  3. hdu4405 概率dp

    飞行棋游戏 问从0结束游戏的投色子次数期望是多少 设dp[i]表示i到n的期望,那么可以得到dp[i]=(dp[i+1]+dp[i+2]+dp[i+3]+dp[i+4]+dp[i+5]+dp[i+6] ...

  4. C#线程中LOCK的意义

    学习心得,为的是让新人能理解,高手直接绕~ lock 确保当一个线程位于代码的临界区时,另一个线程不进入临界区.如果其他线程试图进入锁定的代码,则它将一直等待(即被阻止),直到该对象被释放. 引用一句 ...

  5. Gym - 101987G Secret Code (概率+数学积分)

    题意:有A,B,C三个人要见面,每个人在[0,S]随机选择一个时间点作为见面时间,先到的那个人要等下一个人来了之后和他确认信息,然后马上就走. 例如,假如A先到,B其次,C最后到,那么A要等B到了之后 ...

  6. WDigest

    WDigest 是windows在XP系统中应用的,其作用主要是与超文本传输协议(HTTP)和简单的身份验证安全层(SASL)一起交换使用.而Digest与NTLM协议类似,也是挑战认证协议. 简单说 ...

  7. promise，await，async小论

    Promise: Promise为了解决异步回调地狱而生的,其解决方法就是链式调用promise.then()或promise.all(); Promise有两个参数,resolve和reject,第 ...

  8. python获取网络图片

    方式1 使用urllib库 import urllib.request import os ,stat url = "https://cn.bing.com/th?id=OHR.Lidong ...

  9. SEO搜索引擎优化是什么？

    ㈠什么是SEO? 搜索引擎优化,又称为SEO,即Search Engine Optimization,它是一种通过分析搜索引擎的排名规律,了解各种搜索引擎怎样进行搜索.怎样抓取互联网页面.怎样确定特定 ...

  10. 多版本python的pip 升级后, pip2 pip3 与python版本失配

    mint19.2   本来pip 和 pip2 对应 python2.7   pip3对应python3.6 用源码安装了python3.7之后. 这样 版本也没问题. 但是,  用pip3.7 安装 ...