H5 canvas 直线和三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas" width="500px" height="500px;" style="border: 1px solid #000;"></canvas> <script>
window.onload = function(){
var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768;
var cxt = canvas.getContext("2d");
cxt.moveTo(100,100);
cxt.lineTo(300,300);
cxt.lineTo(100,300);
cxt.lineTo(100,100); cxt.fillStyle = "rgb(2,100,30)";
cxt.fill(); cxt.lineWidth = 1;
cxt.strokeStyle = "red";
cxt.stroke();
cxt.closePath();
cxt.moveTo(100,400)
cxt.lineTo(400,400)
cxt.lineTo(300,400)
cxt.strokeStyle = "green";
cxt.stroke();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas" width="500px" height="500px;" style="border: 1px solid #000;"></canvas> <script>
window.onload = function(){
var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768;
var cxt = canvas.getContext("2d");
cxt.moveTo(100,100);
cxt.lineTo(300,300);
cxt.lineTo(100,300);
cxt.lineTo(100,100); cxt.fillStyle = "rgb(2,100,30)";
cxt.fill(); cxt.lineWidth = 1;
cxt.strokeStyle = "red";
cxt.stroke();
cxt.closePath();
cxt.moveTo(100,400)
cxt.lineTo(400,400)
cxt.lineTo(300,400)
cxt.strokeStyle = "green";
cxt.stroke();
}
</script>
</body>
</html>
H5 canvas 直线和三角形的更多相关文章
- h5 canvas 画图
h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...
- h5 canvas 小球移动
h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- iOS:quartz2D绘图(画一些简单的图形,如直线、三角形、圆、矩形、文字等)
前一篇几乎已经详细介绍了Quartz2D的所有知识,这一篇以及后面就不废话了,主要是用具体的实例来演示绘图效果. 这里我们先来绘制一些简单的图形(如直线.三角形.圆.矩形.文字.图像),它有两种方式可 ...
- H5 canvas 绘图
H5的canvas绘图技术 canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制 ...
- 使用H5 canvas画一个坦克
具体步骤如下: 1. 首先做出绘图区,作为坦克的战场 <canvas id="floor" width="800px" height=&quo ...
- CoreGraphics-基本图形绘制-直线、三角形、矩形、椭圆形、弧形
框架:CoreGraphics 步骤: 1."获取"图形上下文 let cxtRef = UIGraphicsGetCurrentContext()! 2.添加路径 3.渲 ...
- H5 canvas填充文字自动换行
canvas是H5中非常重要,非常常用,也是非常强大的一个新标签,美中不足的事,canvas中没没有自动换行的属性,我的第一反应是,字符串截取,然后计算每行的距离来实现自动换行.. 然后百度了一下,已 ...
- h5 canvas
概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 使用前,首先需要新建一个canvas网页元素. & ...
随机推荐
- 全局Timestamp管理器 检测js执行时间
随手写了个小工具,主要为了测试不同混淆程度的javascript脚本的加载速度1. [代码]Timestamp.js (function() { if (typeof this.Timestamp = ...
- Linux下安装Openfire 4.2.1
1.下载安装包,下载地址:http://www.igniterealtime.org/downloads/index.jsp#openfire 2.将下载的安装包复制到linux服务器的/opt目录下 ...
- BZOJ_3209_花神的数论题_组合数+数位DP
BZOJ_3209_花神的数论题_组合数+数位DP Description 背景 众所周知,花神多年来凭借无边的神力狂虐各大 OJ.OI.CF.TC …… 当然也包括 CH 啦. 描述 话说花神这天又 ...
- vss操作说明
vss命令行 一.环境变量配置 “我的电脑”->“属性”->“高级”->“系统环境变量” 1) 添加追加环境变量 名称为:Path:值为:VSS应用程序所在目录 例如:D:\Pr ...
- 《MIDINET: A CONVOLUTIONAL GENERATIVE ADVERSARIAL NETWORK FOR SYMBOLIC-DOMAIN MUSIC GENERATION》论文阅读笔记
出处 arXiv.org (引用量暂时只有3,too new)2017.7 SourceCode:https://github.com/RichardYang40148/MidiNet Abstrac ...
- 鸭子类型(Duck Typing)
鸭子类型(Duck Typing) 动态类型.没有类型检验.不关注类型,关注方法 相当于静态类型语言的多态 这是程序设计中的一种类型推断风格,这种风格适用于动态语言(比如PHP.Python.Ruby ...
- Excel学习 -- 函数基础
Excel函数基础 1. 单元格是函数的作用对象: 2. 函数由等号.函数表达式.操作符.参数.返回值五部分组成: 3. 商业智能报表中使用的常用函数分类:数学函数.文本函数.逻辑函数.查 ...
- C# 后台处理http请求
using System.Collections.Generic; using System.Linq; using System.Text; using System.Net; using Syst ...
- [POI2007]洪水pow
Description AKD市处在一个四面环山的谷地里.最近一场大暴雨引发了洪水,AKD市全被水淹没了.Blue Mary,AKD市的市长,召集了他的所有顾问(包括你)参加一个紧急会议.经过细致的商 ...
- 解题报告:hdu 1073 Online Judge
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1073 Problem Description Ignatius is building an Onli ...