html5canvas
标签：-- set text 完成后 gre image 刷新 页面 create
1.HTML5用于图形绘制
通过js脚本来完成
标签只是图形容器
必须使用脚本来绘制图形
步骤：
1.创建一个画布canvas
一个画布在网页中是一个矩形框 通过canvas元素来绘制
默认情况下canvas元素没有边框和内容
指定id width height定义画布的宽高
可以在HTML页面中使用多个canvas
用style属性来添加边框
2.用js绘图
canvas元素本身是没有绘图能力的
绘制工作都在js内部完成
总结：
1.画布默认没边框 可以在style里加边框
2.先利用id找到canvas元素 var c = document.getElementById(‘id名‘)
3.创建context对象 var ctx = c.getContext(‘2d‘)
getContext("2d") 对象是内建的 HTML5 对象，
拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
4. ctx.fillStyle = ‘‘ 可以是CSS颜色 渐变 或 图案
fillStyle默认设置是#000000 黑色 这里是填充颜色
5. ctx.fillRect(x,y,width,height) 定义了当前的填充方式 填充为矩形
canvas是一个二维网格
canvas坐标：左上角坐标：x ,y 画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。
矩形宽高： width , height
在画布上绘制宽高为width height的矩形 从坐标 x,y 开始
6.canvas路径
画线 定义开始坐标结束坐标 用stroke（）方法来绘制线条
1）线条开始坐标：moveTo(x,y)
2）线条结束坐标：lineTo(x,y)
3）绘制线条的方法： stroke()
画圆 arc(x,y,r,start,stop)
1）ctx.beginPath()
ctx.arc(50,50,10,0,0.5*Math.PI)
2)圆心坐标：x,y
半径：r
开始的位置：start 水平线右侧 0
结束的位置：stop
角度 0.5*Math.PI 90度
1*Math.PI 下半圆
2*Math.PI 整圆
无论结束位置在哪 都是顺时针走的
文本
1.字体 font
2.实心 fillText(text,x,y)
3.空心 strokeText(text,x,y)
ctx.font = ‘30px Arial‘;
ctx.fillText(‘hhh‘,10,30)
ctx.strokeText(‘hhh‘,10,60)
ctx.stroke()
x无所谓 y要考虑到字体本身的高度
渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色
1.createLinearGradient(x,y,x1,y1) - 创建线条渐变
2.createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
3.使用渐变时 必须使用两种或两种以上的停止颜色
4.指定颜色停止 addColorStop() 指定颜色停止 参数用坐标描述 0至1
5.使用渐变 设置fillStyle或者strokeStyle的值为渐变 然后绘制形状
如矩形 文本 或 一条线
6.使用 createLinearGradient()
var grd = ctx.createLinearGradient(0,0,50,0,80,0);
grd.addColorStop(0,‘red‘);
grd.addColorStop(0.5,‘white‘);
grd.addColorStop(1,‘green‘);
// 填充渐变
ctx.fillStyle = grd;
ctx.fillRect(10,10,50,80)
//创建一个径向/圆渐变 ctx.createRadialGradient
var grd = ctx.createRadialGradient(50,50,10,50,50,20,50,50,30);
grd.addColorStop(0,‘red‘);
grd.addColorStop(0.5,‘white‘);
grd.addColorStop(1,‘green‘);
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,100,80);
图像
把一幅图像放置到画布上 drawlmage(image,x,y) x,y是图片在画布上的起始位置坐标
<canvas id="mycanvas1" width="100px" height="100px" style="border: 1px solid royalblue;"></canvas>
<img src="wei.png" id="imgg">
<script type="text/javascript">
var c = document.getElementById(‘mycanvas1‘)
var ctx = c.getContext(‘2d‘)
var img = document.getElementById(‘imgg‘)
img.onload = function(){
ctx.drawImage(img,0,0)
}
</script>
onload事件 框架/对象（Frame/Object）事件 一张页面或一幅图像完成加载。
当页面载入完毕后执行Javascript代码：
<body onload="myFunction()">
eg:<body onload="myFunction()">
function myFunction(){
alert(‘页面加载完成‘)
}
<!-- 每次刷新 加载完成页面都会弹出 -->
onload 事件会在页面或图像加载完成后立即发生。
onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
所有主要浏览器都支持 onload 事件
以下 HTML 标签支持 onload :
<!-- <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style> -->
在 <img> 使用onload
图片载入后立即弹出 "Image is loaded"
<img src="wei.png" id="ii" onload="loadimg()" >
function loadimg(){
alert(‘加载了图片‘)
}
语法：
在 HTML 中:<body onload="SomeJavaScriptCode">
在 JavaScript 中:window.onload=function(){SomeJavaScriptCode};
参数 描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。标签：-- set text 完成后 gre image 刷新 页面 create
原文地址：https://www.cnblogs.com/aroyny/p/14385622.html