1月10号学习html5绘制图形(第68天的学习)
<!DOCTYPE html>
<head>
<!--开始插入脚本 类型是text或者javascript-->
<script type="text/javascript" src="html5_script5.js"></script>
</head>
<!--onload="draw('canvas')" 调用脚本文件的draw函数进行图形绘画 定义一行标题 canvas元素是专门用来绘制图形 canvas元素是一块无色透明的区域 就相当于在页面上放置了一块"画布" 可以在其中进行图形的描绘-->
<body onload="draw('canvas')">
<h1>canvas元素例子</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>
绘制矩形
<!--创建函数-->
function draw(id)
{
<!--定义变量canvas获得ID-->
var canvas = document.getElementById(id);
<!--判断canvas是 空-->
if(canvas == null)
<!--就返回否-->
return false;
<!--定义变量 context等于canvas对象的getContext方法来获得图形上下文将参数设为2d-->
var context = canvas.getContext('2d')
<!-- fillStyle属性填充样式 在属性中填入填充的颜色值 fillRect方法填充一个矩形 red blue颜色名 lineWidth用来调整边框的厚度 strokeRect方法是用来填充矩形和绘制矩形边框-->
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.fillStyle = "red";
context.strokeStyle = "blue";
context.lineWidth = 1;
context.fillRect(50, 50, 100, 100);
context.strokeRect(50,50,100,100);
}
绘制圆形
<!--创建函数参数id-->
function draw(id)
{
<!--定义变量 canvas获得id-->
var canvas = document.getElementById(id);
<!--判断 canvas是空-->
if(canvas == null)
<!--返回否-->
return false;
<!--定义变量context等于canvas对象的getContext方法来获得图形上下文将参数设为2d-->
var context = canvas.getContext('2d');
<!--fillStyle属性填充样式 在属性中填入填充的颜色值 fillRect方法填充一个矩形-->
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
<!--定义变量n为0-->
var n = 0;
<!--开始一个循环i-->
for(var i=0; i<10; i++)
{
<!--beginPath通过调用这个方法可以开始路径创建 arc方法用来创建路径时，需要使用图形上下文 closePhan 关闭路径 fillStyle设定绘制样式进行图形绘制 -->
context.beginPath();
context.arc(i*25, i*25, i*10, 0, Math.PI*2,true);
context.closePath();
context.fillStyle = 'rgba(255, 0, 0, 25)';
context.fill();
}
}
绘制复杂图形
<!--创建函数参数id-->
function draw(id)
{
<!--定义变量 canvas获得id-->
var canvas = document.getElementById(id);
<!--判断 canvas是空-->
if(canvas == null)
<!--返回否-->
return false;
<!--定义变量context等于canvas对象的getContext方法来获得图形上下文将参数设为2d-->
var context = canvas.getContext('2d');
<!--fillStyle属性填充样式 在属性中填入填充的颜色值 fillRect方法填充一个矩形-->
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
<!--定义变量 n为0 dx为150 dy为150 s为100 beginPath通过调用这个方法可以开始路径创建 fillStyle设定绘制样式进行图形绘制 strokeStyle方法是用来填充矩形和绘制矩形边框-->
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.fillStyle = 'rgb(100,255,100)';
context.strokeStyle = 'rgb(0,0,100)';
<!--定义参数x为 y为 dig为创建圆的方法-->
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15*11;
<!--循环i-->
for(var i=0; i<30; i++)
{
<!--x等于i乘dig y等于i乘dig-->
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
<!--lineTo方法在moveTo方法中指定的直线起点于参数中指定的直线终点之间绘制一条直线-->
context.lineTo(dx+x*s, dy+y*s);
}
<!--closePath关闭路径 fill填充 stroke绘制矩形边框-->
context.closePath();
context.fill();
context.stroke();
}
绘制线性改变
<!--创建函数参数id-->
function draw(id)
{
<!--定义变量 canvas获得id-->
var canvas = document.getElementById(id);
<!--判断 canvas是空-->
if(canvas == null)
<!--返回否-->
return false;
<!--定义变量context等于canvas对象的getContext方法来获得图形上下文将参数设为2d-->
var context = canvas.getContext('2d');
<!--定义变量 g1 为 context.createLinearGradient方法创建线性的渐变对象-->
var g1 = context.createLinearGradient(0,0,0,300);
<!--g1 addColorStop方法追加改变的颜色 fillStyle填充的样式 fillRect方法填充一个矩形-->
g1.addColorStop(0,'rgb(255,255,0)');
g1.addColorStop(1,'rgb(0,255,255)');
context.fillStyle = g1;
context.fillRect(0,0,400,300);
<!--定义变量 n=0 g2=createLinearGradient方法创建线性的渐变对象-->
var n = 0;
var g2 = context.createLinearGradient(0,0,300,0);
<!--g2 addColorStop方法追加改变的颜色 fillStyle填充的颜色-->
g2.addColorStop(0,'rgba(0,0,255,0.5)');
g2.addColorStop(1,'rgba(255,0,0,0.5)');
<!--循环i-->
for(var i=0; i<10; i++)
{
<!--beginPath通过调用这个方法可以开始路径创建 fillStyle填充的样式 arc接口 closePath关闭路径-->
context.beginPath();
context.fillStyle = g2;
context.arc(i*25, i*25, i*10, 0, Math.PI*2, true);
context.closePath();
context.fill();
}
｝
坐标变换
<!--创建函数参数id-->
function draw(id)
{
<!--定义变量 canvas获得id-->
var cannvas = document.getElementById(id);
<!--判断 canvas是空-->
if (canvas == null)
<!--返回否-->
return false;
<!--定义变量context等于canvas对象的getContext方法来获得图形上下文将参数设为2d-->
var context = cnavas.getContext('2d');
<!--fillStyle填充样式 fillRec方法填充一个矩形 translate函数是将整个canvas水平移动x距离，垂直移动y距离-->
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.translate(200, 50);
context.fillStyle = 'rgba(255, 0, 0, 0.25)';
<!--循环i-->
for(var i=0; i<50; i++)
{
<!--translate函数是将整个canvas水平移动x距离，垂直移动y距离 scale方法将图形放大 rotate方法将图形进行旋转 fillRec方法填充一个矩形-->
context.translate(25, 25);
context.scale(0, 95, 0.95);
context.rotate(Math.PI / 10);
context.fillRect(0, 0, 100, 50);
}
}
用transform方法现实变形
<!--创建函数参数id-->
function draw(id)
{
<!--定义变量 canvas获得id-->
var cannvas = document.getElementById(id);
<!--判断 canvas是空-->
if (canvas == null)
<!--返回否-->
return false;
<!--定义变量context等于canvas对象的getContext方法来获得图形上下文将参数设为2d-->
var context = cnavas.getContext('2d');
<!--定义变量 定义颜色-->
var colors = ["red", "orange", "yellow", "green", "blue", "navy", "purple"];
<!--lineWidth属性设置或返回当前线条的宽度 transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形-->
context.lineWidth = 10;
context.transform(1, 0, 0, 1, 100, 0);
<!--循环i-->
for(var i=0; i<colors.length; i++)
{
<!--定义每次向下移动10个像素的变换矩形-->
context.transform(1, 0, 0, 1, 0, 10);
<!--定义颜色-->
context.strokeStyle = colors[i];
<!--beginPath开始创建路径-->
context.beginPath();
<!--绘制圆弧-->
context.arc(50, 100, 100, 0, Math.PI, true);
context.stroke();
}
