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.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 绘图的更多相关文章
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- echarts+php+mysql 绘图实例
最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...
- html5 canvas常用api总结(二)--绘图API
canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API. 绘画的时候canvas相当于画布,而 ...
- HTML5_04之SVG绘图
1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...
- HTML5 学习总结(四)——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
- AR创意分享:儿童涂鸦遇上程序绘图
第一节 临摹 小明经常临摹同桌小美的画作. 美术课上,老师表扬了小美的新作. 图1.1 小美的作品<蒙娜·毛虫的微笑> 临,是照着原作画:摹,是用薄纸张蒙在原作上面画. 第二节 借画 小明 ...
- C# 一段绘图代码 在form_load事件不能显示图
今天无意将一段绘图代码 写在form_load事件了,结果不能显示绘图.(代码:Graphics g = this.CreateGraphics();Pen pen = new Pen(Color.R ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- Windows Form调用R进行绘图并显示
R软件功能非常强大,可以很好的进行各类统计,并能输出图形.下面介绍一种R语言和C#进行通信的方法,并将R绘图结果显示到WinForm UI界面上. 1 前提准备 安装R软件,需要安装32位的R软件,6 ...
随机推荐
- 1.什么是bat文件
bat文件是dos下的批处理文件.批处理文件是无格式的文本文件,它包含一条或多条命令.它的文件扩展名为 .bat 或 .cmd. 在命令提示下输入批处理文件的名称,或者双击该批处理文件,系统就会调用c ...
- hive各种报错
搭建了 CDH6.1.0环境 新加入一台机器都hive但是报错 javax.jdo.JDODataStoreException: Required table missing : "`VER ...
- jq选择CheckBox进行排序
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name=& ...
- 多个分组树分别实现单选jq+angular
$scope.seletedGroup=[];var $li=$("#departmentsContainer>ol>li");$.each($li,function( ...
- 关于overflow的学习
我在此记录一下我的学习到的东西,我自己不清楚所以要记录下来. overflow:hidden 但内元素的高度或宽度大于外元素的高度或宽度时,自动隐藏多余的部分,当然外元素设置了固定的高度或宽度. ov ...
- 如何使用sqlalchemy根据数据库里面的表反推出模型,然后进行查询
关于sqlalchemy映射数据库里面的表,一般情况下我们是需要定义一个模型来映射数据库里面的表的.但是很多时候数据库里面的表都是定义好的,而且字段很多,那么有没有不定义模型,还能使用orm语法查找数 ...
- html 中 图片和文字一行 垂直居中对齐
效果: 代码:<div><img src='img/point_icon.png' width='35px' height='35px' style='float: lef ...
- 加上这几个组件,flask摇身一变是django
写在前面 flask和django作为python中的两大开源框架,各分春秋,各有各自的优点,不能一概而论说哪个好哪个不好.flask框架小而精,适用于快速开发一些小的应用的项目.django大而全, ...
- 关于ORACLE的串行化隔离级别--来自ORACLE概念手册
为了描述同时执行的多个事务如何实现数据一致性,数据库研究人员定义了被 称为串行化处理(serializability)的事务隔离模型(transaction isolation model).当所有 ...
- Spring MVC 基于AnnotationFormatterFactory接口实现自定义的规则
1.创建一个类来实现AnnotationFormatterFactory接口 代码: package com.oukele.CustomAnnotation; import com.oukele.mo ...