<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-基础篇的更多相关文章

  1. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

  2. HTML5 <canvas> 基础学习

    HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...

  3. HTML5 Canvas基础知识

    HTML5画布 1.创建一个画布         <canvas id="myCanvas" width="200" height="100&q ...

  4. HTML5画布(基础篇11-10)

    <script type="text/javascript"> $(function(){ var s = $("#myCanvas")[0]; v ...

  5. HTML5 Canvas——基础入门

    认识canvas html5的新标签 <canvas>标签只是图像容器,必须使用js来绘制图形 可以通过多种方法使用canvas绘制路径,盒,圆,字符以及添加图像 canvas画布 < ...

  6. html5 canvas基础10点

    本文主要讲解下一些canvas的基础 1.<canvas id="canvas">若此浏览器不支持canvas会显示该文字</canvas> //创建个ht ...

  7. canvas 基础知识整理(二)

    html部分: <canvas id="myCanvas" width="800" height="800" ></can ...

  8. canvas 基础知识整理(一)

    canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...

  9. Chart.js – 效果精美的 HTML5 Canvas 图表库

    Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是 ...

  10. HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素

    欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...

随机推荐

  1. Maven之profile实现多环境配置动态切换

            一般的软件项目,在开发.测试及生产等环境下配置文件中参数是不同的.传统的做法是在项目部署的时候,手动修改或者替换这个配置文件.这样太麻烦了,我们可以用Maven的profile来解决这 ...

  2. COMCMS 微进阶篇,从0开始部署到Centos 7.4

    言:上一篇,我们介绍了,如何本地调试和部署到windows服务器. 本篇,将带大家,从0到1,开始部署到Centos系统上... 经过测试,可以完美支持Centos.这也是.net core 跨平台的 ...

  3. Pointcut 笔记

    教程 https://blog.csdn.net/kkdelta/article/details/7441829 http://www.cnblogs.com/youse/p/6564524.html ...

  4. sort 快排解决百万级的排序

    问题:给n个整数,按从大到小的顺序,输出前m大的整数0<m,n<1000000,每个整数[-500000,500000]输入:5 33 -35 92 213 -644输出:213 92 3 ...

  5. 埋锅。。。BZOJ1004-置换群+burnside定理+

    看这道题时当时觉得懵逼...这玩意完全看不懂啊...什么burnside...难受... 于是去看了点视频和资料,大概懂了置换群和burnside定理,亦步亦趋的懂了别人的代码,然后慢慢的打了出来.. ...

  6. A4纸尺寸 web打印报告

    A4纸对应的像素尺寸: <style> @media print { .Noprn{ display:none;} .print-hidden { display: none !impor ...

  7. 使用faker去构造一个User-Agent

    faker可以仿造各种各样的信息,可以使用faker去构造一个User-Agent from faker import Factory f = Factory.create() 'User-Agent ...

  8. R语言

    什么是R语言编程? R语言是一种用于统计分析和为此目的创建图形的编程语言.不是数据类型,它具有用于计算的数据对象.它用于数据挖掘,回归分析,概率估计等领域,使用其中可用的许多软件包. R语言中的不同数 ...

  9. net core 小坑杂记之配置文件读取(不定期更新)

    其实很早就想写了,原想等积累差不多了再写的,但是发现遇到一个当时记下效果会比较好,所以就不定期更新这个系列了,后面获取会整个整理一下. 此篇记载net core入门时踩的一些坑,网上教程太少了,也不规 ...

  10. Django之用户上传文件的参数配置

    Django之用户上传文件的参数配置 models.py文件 class Xxoo(models.Model): title = models.CharField(max_length=128) # ...