HTML5-canvas-基础篇
<canvas>新元素
<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。
注意: 默认情况下 <canvas> 元素没有边框和内容。
画方
<!--fillStyle是填充样式，如果不设置fillStyle属性，默认填充色为黑色，fillRect是画一个矩形，参数为X,Y,Width,Height-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="author" content="赵慧娟">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
var canvas=document.getElementById("myCanvas")
var ctx=canvas.getContext("2d");
ctx.fillStyle="deeppink";
ctx.fillRect(10,10,100,100);
//ctx.moveTo(0,0); //定义开始坐标
//ctx.lineTo(100,100); //定义结束坐标
//ctx.stroke(); //绘制线条
})
</script>
</head>
<body>
<canvas id="myCanvas" width="100" height="100"></canvas>
</body>
</html>
运行结果：
画圆
<!--arc画圆，参数是X,Y,半径，起始角，结束角，顺时针/逆时针(可选)XY指的是圆点的距离-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="author" content="赵慧娟">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
var canvas=document.getElementById("myCanvas")
var ctx=canvas.getContext("2d");
ctx.fillStyle="deeppink";
ctx.arc(50,50,50,0,2*Math.PI);
ctx.stroke();
//ctx.fillText("Hello World",,); //绘制实心字体
//ctx.strokeText("Hello World",10,50); //绘制空心字体
})
</script>
<style type="text/css">
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="100" height="100"></canvas>
</body>
</html>
运行结果：
渐变
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"blue"); // 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
运行结果：
径向/圆渐变
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
运行结果：
图像
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="author" content="赵慧娟">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<style type="text/css">
canvas{
border: 1px solid #000;
}
#flower{
border: 1px solid #000;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<img src="img/a.ico" id="flower" />
<canvas id="myCanvas" width="100" height="100"></canvas>
<script type="text/javascript">
$(function(){
var canvas=document.getElementById("myCanvas")
var ctx=canvas.getContext("2d");var img=document.getElementById("flower");
img.onload=function(){
ctx.drawImage(img,20,20,80,80); //drawImage（对象，X,Y，W,H）
}
})
</script>
</body>
</html>
运行结果：
（右图为canvas图像）
HTML5-canvas-基础篇的更多相关文章
- 《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
- HTML5 <canvas> 基础学习
HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...
- HTML5 Canvas基础知识
HTML5画布 1.创建一个画布 <canvas id="myCanvas" width="200" height="100&q ...
- HTML5画布(基础篇11-10)
<script type="text/javascript"> $(function(){ var s = $("#myCanvas")[0]; v ...
- HTML5 Canvas——基础入门
认识canvas html5的新标签 <canvas>标签只是图像容器,必须使用js来绘制图形 可以通过多种方法使用canvas绘制路径,盒,圆,字符以及添加图像 canvas画布 < ...
- html5 canvas基础10点
本文主要讲解下一些canvas的基础 1.<canvas id="canvas">若此浏览器不支持canvas会显示该文字</canvas> //创建个ht ...
- canvas 基础知识整理（二）
html部分: <canvas id="myCanvas" width="800" height="800" ></can ...
- canvas 基础知识整理（一）
canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...
- Chart.js – 效果精美的 HTML5 Canvas 图表库
Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是 ...
- HTML5 Canvas（画布）实战编程初级篇：基本介绍和基础画布元素
欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...
随机推荐
- Linux运维必会的MySQL企业面试题大全
(1)基础笔试命令考察 1.开启MySQL服务 /etc/init.d/mysqld start service mysqld start systemctl start mysqld 2.检测端口是 ...
- Charles 抓包工具安装和采坑记录
Charles 抓包工具安装和采坑记录 网络抓包是解决网络问题的第一步,也是网络分析的基础.网络出现问题,第一步肯定是通过抓包工具进行路径分析,看哪一步出现异常.做网络爬虫,第一步就是通过抓包工具对目 ...
- C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 增强服务安全、阻止非授权的用户非法调用
多一道防线,多一些安全保障,当程序发布到互联网上,再有成千上万的用户在用,总会有各种牛人出现,万一遇到破坏分子,那会有灾难性的打击. 只要跟利益有关系的,跟资金有关系,跟财务有关系,有竞争对手,软件系 ...
- 006-筛选分类排序搜索查找Filter-Classificatio-Sort-Search-Find-Seek-Locate
006-筛选分类排序搜索查找Filter-Classificatio-Sort-Search-Find-Seek-Locate https://www.cnblogs.com/delphixx/p/1 ...
- [2017BUAA软工助教]个人项目小结
2017BUAA个人项目小结 一.作业链接 http://www.cnblogs.com/jiel/p/7545780.html 二.评分细则 0.注意事项 按时间完成并提交--正常评分 晚交一周以内 ...
- C++实现算法常用的STL---整理
algorithm min(a,b)和max(a,b) #include<iostream> #include<algorithm> using namespace std; ...
- js-其他跨域技术(JSONP`Comet)
###1. JSONP JSONP由两部分组成:回调函数和数据 JSONP是通过动态<script>元素来使用的,使用时可以为src属性指定一个跨域URL eg: function ha ...
- IdentityServer4【Introduction】之术语
术语 在规范.文档和对象模型中使用了一些你应该了解的术语. IdentityServer IdentityServer是一个OpenID Connect的提供者,它实现了OpenID Connect和 ...
- java集合迭代器
一.Java中有一个设计模式是迭代器模式 1.迭代器模式定义迭代器模式(Iterator),提供一种方法顺序访问一个聚合对象中的各种元素,而又不暴露该对象的内部表示. 2.迭代器模式概述Java集合框 ...
- Js中instanceof 的用法
在 JavaScript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 “object”. ...