canvas制图学习

<!DOCTYPE html>

<head>

<title>canvas练习</title>

<style>

body{

margin: 0px;

}

canvas{

background: #e2dddc;

}

</style>

</head>

<body>

//固定语法，定义变量，设置绘制环境

var canvas=document.getElementById('canvas');//获取canvas动画的id值，单引号

var context=canvas.getContext('2d');//2d需小写。单引号

//绘制直线

context.lineWidth=5;//设置线的宽度

context.strokeStyle="#156fff";//绘制的样式，颜色，渐变等

context.moveTo(0,0);//设置起点

context.lineTo(200,0);//设置终点

context.stroke();//开始绘制

//可以通过四条直线，但是绘制矩形，会有小缺角

context.beginPath();

context.moveTo(20,20);

context.lineTo(80,20);

context.lineTo(80,80);

context.lineTo(20,80);

// context.lineTo(20,20);//通过绘制四条边，但是在有的浏览器会有小缺角

context.closePath();//可通过closepath闭合图形，与上面最后一条分开

context.stroke();

//矩形绘制通过rect方法

context.beginPath();//重新绘制图形，需要从新定义起点

context.strokeStyle="#696922";//可重新定义样式。。。

context.rect(20,90,50,50);//x,y,w,h的值xy起点，wh矩形的宽高

context.stroke();//开始绘制

//j将rect()和stroke()方法合并

context.beginPath();

context.strokeStyle="#aaaaaa";

context.strokeRect(20,150,50,50);//方法合并绘制矩形

//fillStroke()绘制填充图形

context.beginPath();

context.fillStyle="#EEAEEA";//fillStyle方法类似strokestyle，改变样式

context.fillRect(20,210,50,50);//绘制填充图。默认黑色

/*********************************注意圆弧角度的对比****************************************/

//绘制圆弧arc(x,y,r,开始角度，结束角度，true/false),角度按照弧度Math.PI写，True设置逆时针绘制，false顺时针

context.beginPath();

context.arc(150,50,30,0,Math.PI/3,true);//默认false，顺时针，最后一个参数可以省略

context.stroke();

//绘制圆弧arc(x,y,r,开始角度，结束角度，true/false),角度按照弧度Math.PI写，True设置逆时针绘制，false顺时针

context.beginPath();

context.arc(150,120,30,0,Math.PI/3,false);//默认false，顺时针，最后一个参数可以省略

context.stroke();

/*********************************结束***************************************************/

//绘制圆

context.beginPath();

context.fillStyle="#ff3c00"

context.arc(150,190,30,0,Math.PI*2,true);//默认false，顺时针，最后一个参数可以省略

context.fill();//绘制圆填充

context.stroke();//圆形加外框

//不完整圆

context.beginPath();

context.lineWidth=5;

context.arc(150,260,30,0,Math.PI/3,true);//默认false，顺时针，最后一个参数可以省略

context.closePath();//闭合圆外框，

context.fill();//绘制圆填充

context.stroke();

//绘制扇形

context.beginPath();

context.moveTo(250,50);//起点

context.arc(250,50,30,Math.PI*7/6,Math.PI*11/6,false);

context.closePath(); //闭合

context.stroke();

context.fill();

//用fill绘制扇形,两个扇形，通过扇形覆盖完成，但是有细边存在

context.beginPath();

context.fillStyle = "coral";

context.moveTo(600, 200);

context.arc(600, 200, 200, Math.PI * 7 / 6, Math.PI * 11 / 6);

context.closePath();

context.fill();

context.beginPath();

context.fillStyle = "#e2dddc";

context.moveTo(600, 200);

context.arc(600, 200, 100, Math.PI * 7 / 6, Math.PI * 11 / 6);

context.closePath();

context.fill()

//用stroke绘制扇形，直接设置线宽

context.beginPath();

context.strokeStyle = "coral";

context.lineWidth = 100;

context.arc(1000, 200, 150, Math.PI * 11 / 6, Math.PI * 7 / 6, true);

context.stroke();

//汉字添加

context.beginPath();

context.strokeStyle = "coral";

context.lineWidth = 100;

context.arc(200,500,150,Math.PI * 11 / 6, Math.PI * 7 / 6,true);

context.stroke();

context.beginPath();

context.fillStyle="red";

context.strokeStyle="green";

context.font="bold 20px Arial";

context.lineWidth=1;//一定要设置绘制字的宽度,未重新定义宽度，则使用上面定义的宽度，会导致汉字混乱

context.strokeText("纵",180,350);

context.fillText("横",180,390);

//线性渐变色createLinearCradient()

context.beginPath();

g=context.createLinearGradient(50,650,350,600);//注意大小写.计算线性起点和终点

g.addColorStop(0,"#f00a0a");

g.addColorStop(0.4,"#cbce12");

g.addColorStop(0.8,"#1244ce");

g.addColorStop(1,"#a212ce");

context.strokeStyle = g;

context.lineWidth = 100;

context.arc(200,800,150,Math.PI * 11 / 6, Math.PI * 7 / 6,true);

　　 context.stroke();

/*****************************************太极图*******************************************/

//canvas绘制太极图,先stroke圆圈，在绘制左右黑白半圆，填充黑白大圆，加入黑白中心小圆

context.beginPath();

context.lineWidth=1;

context.strokeStyle="#000000";

context.arc(600,610,200,0,2*Math.PI);

context.stroke();

context.closePath();

//左边的大黑半圆

context.beginPath();

context.fillStyle="#000000";

context.arc(600,610,200,0.5*Math.PI,1.5*Math.PI);

context.fill();

context.closePath();

//右边的大白半圆

context.beginPath();

context.fillStyle="#ffffff";

context.arc(600,610,200,0.5*Math.PI,1.5*Math.PI,true);

context.fill();

context.closePath();

//上面的左边半圆

context.beginPath();

context.arc(600,510,100,0.5*Math.PI,1.5*Math.PI);

context.fillStyle="white";

context.fill();

context.closePath();

//上面的小黑圆

context.beginPath();

context.arc(600,510,33,0,2*Math.PI);

context.fillStyle="black";

context.fill();

context.closePath();

//下面的右边半黑圆

context.beginPath();

context.arc(600,710,100,Math.PI,(3/2*Math.PI),true);

context.fill();

context.closePath();

//下面的小白圆

context.beginPath();

context.arc(600,710,33,0,2*Math.PI);

context.fillStyle="white";

context.fill();

context.closePath();

/*****************************************结束*********************************************/

</script>

</body>

</html>

canvas制图学习的更多相关文章

canvas的学习
canvas的学习一. //获取画布 var mycanvasEle = document.getElementById("mycanvas");二. //内容 var ctx ...
HTML5 <canvas> 基础学习
HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形创建一个画布( ...
canvas一周一练 -- canvas基础学习
从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...
canvas基础学习（四）
今天逛天猫时,看见优衣库店铺首页有个这个飘雪效果,顿时觉得好酷炫,立马从里面copy代码进行学习. 之前我也做过一些canvas特效,往往在canvas全屏时,canvas下层的div就无法进行dom ...
canvas基础学习（二）
一.图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1.ctx.drawImage(img,x,y); img是指图像对象,x和y分别是这个图像左上角在ca ...
canvas 的学习
canvas 绘制直线的API有: 1.moveTo()起点坐标. 2.lineTo()绘制的直线 3. fillStyle以及 flii()是绘制实体的 4. strokeStyle 和stroke ...
Canvas基础学习（一）——实现简单时钟显示
HTML5最受欢迎的功能就是<canvas>元素.这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形.关于<canvas>元素的一些 ...
HTML5 CANVAS制图基础总结
一.基本绘图首先,定义2D渲染变量ct(这里用了Jquery库): var ct = $(#canvasId).get(0).getContext('2d'); 以下是绘制各种基本图形的方法: // ...
Canvas 绘图学习笔记2
1 绘制文本 fillText(string,x,y,maxWidth) //填充试绘制文本 strokeText(string,x,y,maxWidth) 画线试绘制文本设置字体样式: cont ...

随机推荐

POJ2449 【第k短路/A*】
题目链接:http://poj.org/problem?id=2449 题目大意: 给出n个点,m条有向边,最后一行给出起点到终点的第k短路.求长度. 题解思路: 这是我第一道第k短路题以及A*算法的 ...
Java面试 - 什么是单例设计模式，为什么要使用单例设计模式，如何实现单例设计模式(饿汉式和懒汉式)？
什么是单例设计模式? 单例设计模式就是一种控制实例化对象个数的设计模式. 为什么要使用单例设计模式? 使用单例设计模式可以节省内存空间,提高性能.因为很多情况下,有些类是不需要重复产生对象的. 如果重 ...
乐字节Java|GC垃圾回收机制、package和import
本文接上一篇:乐字节Java|this关键字.static关键字.block块.本文是接着讲述JavaGC垃圾回收机制.package 和 import语句. 一.GC垃圾回收机制 GC全名:Garb ...
Java的设计模式（4）--抽象工厂模式
提供一个创建一系列或相互依赖对象的接口,而无须指定他们具体的类.例如某些系统可能需要为用户提供一系列相关对象,但系统不希望用户直接使用new运算符实例化这些对象,而是应当由系统来控制这些对象的创建,否 ...
vector简单常用用法
Vector是什么? vector翻译为向量,从某种角度来说就是一个可以变长的数组,它会根据需要自动扩充数组的容量,除此之外其是一个STL中的模板类,其还具有一些内部的方法. Vector的使用方法 ...
FZU - 2295 Human life （最大权闭合子图）
题目链接 FZU - 2295 Human life 题目分析题意:你在玩一个游戏,在其中你可以通过学习一些技能,但是学习某些技能之前,可能还要学习一些其他的技能,并且学习任何技能都有一定的花费: ...
laravel6.0路由
1.基本路由路由定义在routes目录下,路由执行是在控制器之前,路由路径 routes目录下api.php 关于接口路由定义文件包含的路由位于 api 中间件组约束之内,支持频率限制功能,这些路由是 ...
Python 基础教程 | 菜鸟教程
https://www.runoob.com/python/python-install.html
SpringCloud Hystrix/Feign 整合 Hystrix 后首次请求失败解决方案
Idea 使用 Junit4 进行单元测试
目录 Idea 使用 Junit4 进行单元测试 1. Junit4 依赖安装 2. 编写测试代码 3. 生成测试类 4. 运行 Idea 使用 Junit4 进行单元测试 1. Junit4 依赖安 ...

canvas制图学习

canvas制图学习的更多相关文章

随机推荐

热门专题