phpStudy
phpStudy
网站首页
软件下载
PHP教程
编程技术
PHP
MySQL
HTML
CSS
JavaScript
MSSQL
AJAX
.NET
JSP
window
Linux
Mac
ASP
服务器
CMS
SQL
jQuery
C#
C++
java
Android
IOS
oracle
MongoDB
PostgreSQL
SQLite
教程手册
php
html
html5
css
css3
JavaScript
ajax
jquery
sql
ado
asp
aspnet
browsers
careers
dhtml
dotnetmobile
dtd
e4x
glossary
hosting
htmldom
json
media
msnet
quality
rdf
rss
schema
semweb
site
sitemap
smil
soap
svg
tags
tcpip
vbscript
w3c
wap
web
webservices
wmlscript
wsdl
xforms
xhtml
xlink
xml
xmldom
xpath
xquery
xsl
xslfo
php中文网
搜索
首页
PHP教程
一波HTML5 Canvas基础绘图实例代码集合
一波HTML5 Canvas基础绘图实例代码集合
基本绘制
XML/HTML Code
复制内容到剪贴板
var
canvas
=
document
.getElementById('canvas');
if (canvas.getContext) {
var
context
=
canvas
.getContext('2d');
// 线宽
context.lineWidth
=
4
;
// 画笔颜色
context.strokeStyle
=
'red'
;
// 填充色
context.fillStyle
=
"red"
;
// 线帽类型
context.lineCap
=
'butt'
; // round, square
// 开始路径
context.beginPath();
// 起点
context.moveTo(10,10);
// 终点
context.lineTo(150,50);
// 绘制
context.stroke();
}
矩形
XML/HTML Code
复制内容到剪贴板
var
canvas
=
document
.getElementById('canvas');
if (canvas.getContext) {
context.beginPath();
context.strokeRect(10,10,70,40);
// 矩形的另一种方式
context.rect(10,10.70,40);
context.stroke();
// 实心矩形
context.beginPath();
context.fillRect(10,10,70,40);
// 另一种方式实心矩形
context.beginPath();
context.rect(10,10,70,40);
context.fill();
}
圆形
XML/HTML Code
复制内容到剪贴板
var
canvas
=
document
.getElementById('canvas');
if (canvas.getContext) {
context.beginPath();
// 圆中心坐标x, 圆中心坐标Y, 圆弧半径, 起始角度,终止角度,是否逆时针
// 第4个参数和第五个参数是要传入的弧度,如果画30角度,需要将其转化为弧度 30 * Math.PI / 180
context.arc(100,100,70,0,130 * Math.PI / 180, true);
context.stroke();
context.fill();
}
圆角
XML/HTML Code
复制内容到剪贴板
var
canvas
=
document
.getElementById('canvas');
if (canvas.getContext) {
context.beginPath();
context.moveTo(20,20);
context.lineTo(70,20);
// 为一条路径画弧度p1.x p1.y p2.x, p2.y 弧半径,
context.arcTo(120,30,120,70, 50);
context.lineTo(120,120);
context.stroke();
// 擦除canvas 画板
context.beginPath();
context.fillRect(10,10,200,100);
// 擦除区域
context.clearRect(30,30,50,50);
}
二次贝塞尔曲线
XML/HTML Code
复制内容到剪贴板
var
canvas
=
document
.getElementById('canvas');
if (canvas.getContext) {
context.beginPath();
context.moveTo(100,100);
context.quadraticCurveTo(20,50,200,20);
context.stroke();
}
三次贝塞尔曲线
XML/HTML Code
复制内容到剪贴板
var
canvas
=
document
.getElementById('canvas');
if (canvas.getContext) {
context.moveTo(68,130);
var
cX1
=
20
;
var
cY1
=
10
;
var
cX2
=
268
;
var
cY2
=
10
;
var
endX
=
268
;
var
endY
=
170
;
context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);
context.stroke();
// 利用clip指定绘图区域,指定绘图区域之后,只能在绘图区域中进行绘图擦欧总
// 绘制圆形
context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);
// 限制区域
context.clip();
// 开始尝试绘制其他
context.beginPath();
context.fillStyle
=
'lightblue'
;
// 结果矩形并没有显示出来
context.fillRect(0,0,300,150);
}
画板进阶使用
XML/HTML Code
复制内容到剪贴板
var
canvas
=
document
.getElementById('canvas');
if (canvas.getContext) {
var
context
=
canvas
.getContext('2d');
/*
* drawImage(image,dx,dy)
* drawImage(image,dx,dy,dw,dh)
* drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
* image 绘图对象
* dx dy canvas 的坐标
* dw,dh 表示 image 在canvas中即将绘图的位置
* sw,sh 表示image 所要绘图的区域
* sx,sy 所要绘图的开始位置
*/
var
image
=
document
.getElementById('img');
context.drawImage(image, 0, 0);
var
img
=
new
Image();
img.src
=
'images/1.jpg'
;
img.onload
=
function
(){
// drawImage
// 从 0,0 坐标开始绘制
// context.drawImage(img,0,0);
// 从0,0 开始,绘制整张图到100,100 长宽
// context.drawImage(img, 0, 0, 100, 100);
// 截图,50,50 到 100,100 从 260,130 开始绘制,放到 100,100 长宽区域中
// context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);
// 利用getImageData 和 putImageData 绘制图片
context.drawImage(img, 10, 10);
// 从画板上获取像素数据
// 开始位置, 结束位置
var
imgData
=
context
.getImageData(50,50,100,100);
// 将数据画到画板指定位置坐标
context.putImageData(imgData,10,260);
// 将所去的像素数据一部分,画到画板上
context.putImageData(imgData,200,260,50,50,100,100);
// createImageData 创建像素
var
imgData
=
context
.getImageData(50,50,200,200);
// 创建指定大小的空对象
var
imgData01
=
context
.createImageData(imgData);
for (
i
=
0
; i
<
imgData01.width
* imgData01.height * 4; i+=4) {
// 红色像素
imgData01.data[i + 0] = 255;
imgData01.data[i+1] = 0;
imgData01.data[i+2] = 0;
imgData01.data[i+3] = 255;
}
context.putImageData(imgData01, 10, 260);
}
}
«
»
PHP教程
PHP简介
PHP基本语法
PHP类型
PHP变量
PHP运算符
PHP控制结构
PHP函数
PHP类与对象
PHP异常处理
函数库分类
快速导航
PHP
MySQL
HTML
CSS
JavaScript
MSSQL
AJAX
.NET
JSP
Linux
Mac
ASP
服务器
SQL
jQuery
C#
C++
java
Android
IOS
oracle
MongoDB
SQLite
wamp
交通频道
Copyright © 2016 phpStudy | 豫ICP备2021030365号-3