一波HTML5 Canvas基础绘图实例代码集合_html5教程技巧-H5教程-PHP中文网

首页

web前端

H5教程

一波HTML5 Canvas基础绘图实例代码集合_html5教程技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

canvashtml5绘图

基本绘制

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);
}
}

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

html5是什么意思Apr 26, 2021 pm 03:02 PM

html5是指超文本标记语言（HTML）的第五次重大修改，即第5代HTML。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。