绘制线条粗细以及绘制变化的坐标

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>
	<canvas id="mycas" width="400" height="400"></canvas>
	<div>
	<input type="button" value="绘制路径1" onclick="lujing1()"/>

	<input type="button" value="绘制渐变1" onclick="jianbian1()"/>
	<input type="button" value="绘制渐变2" onclick="jianbian2()"/>

	<input type="button" value="绘制渐变3" onclick="jianbian3()"/>
	<input type="button" value="绘制渐变4" onclick="jianbian4()"/>
	</div>
	<div>
	<input type="button" value="绘制线条粗细1" onclick="xiantiao()"/>

	<input type="button" value="绘制变化的坐标" onclick="bianhua()"/>
	<input type="button" value="绘制缩放效果" onclick="bianhua2()"/>
	<input type="button" value="绘制旋转效果" onclick="bianhua3()"/>
	</div>
	<script>
	function bianhua3(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	g.translate(200, 200);

	for(var i=0; i<36; i++){
	g.rotate(10*Math.PI/180);
	g.fillRect(100, 100, 100,100);
	}

	}
	function bianhua2(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	g.fillRect(20, 20, 50,50);

	g.fillStyle="blue";
	g.translate(50, 10);
	g.scale(2,0.5);
	g.fillRect(20, 20, 50,50);

	g.fillStyle="yellow";
	g.translate(50, 10);
	g.scale(2,2);
	g.fillRect(20, 20, 50,50);


	}
	function bianhua(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	g.fillRect(20, 20, 50,50);

	g.fillStyle="blue";
	g.translate(100, -10);
	g.fillRect(20, 20, 50,50);

	}
	function xiantiao(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	g.moveTo(10,10);
	g.lineTo(200, 300);

	g.lineWidth=30;
	g.stroke();

	}
	function jianbian4(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	var cg = g.createRadialGradient(100,100, 50, 60,80, 100);
	cg.addColorStop(0, "blue");
	cg.addColorStop(1, "yellow");

	g.fillStyle=cg;

	g.arc(100, 100, 120, 0, Math.PI*2);

	g.fill();
	}
	function jianbian3(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	var cg = g.createRadialGradient(100,100, 50, 100,100, 100);
	cg.addColorStop(0, "blue");
	cg.addColorStop(1, "yellow");

	g.fillStyle=cg;

	g.arc(100, 100, 120, 0, Math.PI*2);
	// g.stroke();
	g.fill();
	// g.fillRect(0, 0, 300, 300);
	}
	function jianbian2(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	var cg = g.createLinearGradient(50,50, 250,250);
	cg.addColorStop(0, "blue");
	cg.addColorStop(1, "yellow");

	g.fillStyle=cg;

	g.fillRect(30, 30, 300, 300);
	}
	function jianbian1(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	var cg = g.createLinearGradient(50,50, 300,50);
	cg.addColorStop(0, "blue");
	cg.addColorStop(0.6, ‘gray‘);
	cg.addColorStop(1, "yellow");

	g.fillStyle=cg;

	g.fillRect(0, 50, 400, 200);
	}
	function lujing1(){
	var cas = document.getElementById("mycas");
	var g = cas.getContext("2d");

	g.beginPath();
	g.arc(100,100, 50, Math.PI4/3, Math.PI2/3, false);
	g.lineTo(100, 100);
	g.closePath();
	g.stroke();
	g.fill();

	g.beginPath();
	g.fillStyle=‘blue‘;
	g.arc(95,100, 50, Math.PI4/3, Math.PI2/3, true);
	g.lineTo(95, 100);
	g.closePath();
	g.stroke();
	g.fill();
	}
	</script>
	</body>
	</html>

时间： 2024-11-07 14:55:34

绘制线条粗细以及绘制变化的坐标的相关文章

常用GDI函数(1):绘制线条和图形

1. CDC::SetPixel()用来绘制一个像素点. 使用Win32 API函数: HDC hdc = ::GetDC(m_hWnd);//获得窗口的设备描述表 ::SetPixel(hdc, 100, 200, RGB(255, 0, 0)); ::ReleaseDC(m_hWnd, hdc);//释放DC资源 CDC::MoveTo(),CDC::LineTo()用来绘制直线. 使用CDC类: CDC* pDC = GetDC();//获得与当前窗口相关联的DC对象 pDC->MoveT

Canvas绘制线条模糊的解决方案

前段时间,做一个跨平台app项目,需要绘制分时图和K线图.找了很多开源的js的图表库,包括echarts.highcharts等等,都不是很满意,原因有2: 1.太臃肿,我实际上只要一个分时和一个K线图表,最多搭配几个线形图 2.不满足需求.主要就是分时图,国内玩的js图表库,几乎都没有分时图.都是用1分钟线的收盘价线来做的,和中国股民的使用习惯完全不搭界. 多年前有人开源了一个js绘制股票图形的库,叫做html54stock,图像表现上很符合中国人的使用习惯,但是也有问题: 1.封装不好,很多

iOS 动画绘制线条颜色渐变的折线图

效果图 .................... 概述现状折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有的也使用了动画,但是线条颜色渐变的折线图的demo少之又少,甚至可以说没有.该Blog阐述了动画绘制线条颜色渐变的折线图的实现方案,以及折线图线条颜色渐变的实现原理,并附以完整的示例. 成果本人已将折线图封装到了一个UIView子类中,并提供了相应的接口.该自定义折线图视图,基本上可以适用于大部分

HTML5 Canvas 学习笔记（canvas绘制线条、矩形、多边形、圆形、圆环、组合图形、文字、自定义图像）

学习资源:http://www.w3school.com.cn/html5/html_5_canvas.asp http://blog.csdn.net/clh604/article/details/8536059 http://www.jb51.net/html5/70307.html 一.对 canvas 的理解 <canvas>标签是 HTML5 中的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件. canvas 是用来在网页上绘制图形的(我们通常称之为画布),

canvas详解----绘制线条

<!DOCTYPE html> <html> <head> <title>canvas详解</title> </head> <body> <canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50 auto;&q

HTML5中的<canvas>画布:使用canvas元素在网页上绘制线条和圆(1)

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: 1 <canvas id="myCanvas" width="200" height="100"></ca

使用html5 Canvas绘制线条(直线、折线等)

使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法基本描述 strokeStyle 用于设置画笔绘制路径的颜色.渐变和模式.该属性的值可以是一个表示css颜色值的字符串.如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象 globalAlpha 定义绘制内容的透明度,取值在0.0(完全透明)和1.0(完全不透明)之间,默认

?canvas绘制线条详解

<!DOCTYPE html> <html> <head> <title>canvas详解</title> </head> <body> <canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50 auto;&q

Unity3D 卡通描边之控制线条粗细

一.前言之前我发表过一篇Unity3D 卡通渲染基于退化四边形的实时描边,最重要的实时描边已经实现了,本文接下来要完善一下它. 在之前的实时描边中,使用了几何着色器中的LineStream来进行绘制线条的,这样绘制线条是无法脱离底层特性来在所有平台上通用式地控制线条的粗细,这就需要我们再做文章. 二.原理关于图形学中如何控制线条粗细这个问题,其实早就有人做了研究,文章在这. 借用该文章的一张图原理看图就一目了然,在裁剪空间中,e0和e1是线条的2个顶点,之后依次计算出二维向量ext和n,

绘制线条粗细 以及 绘制变化的坐标

绘制线条粗细 以及 绘制变化的坐标的相关文章

绘制线条粗细以及绘制变化的坐标

绘制线条粗细以及绘制变化的坐标的相关文章