极乐门资源网 Design By www.ioogu.com
基本绘制
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();
- }
矩形
- 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();
- }
圆形
- 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();
- }
圆角
- 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();
- }
三次贝塞尔曲线
- 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);
- }
画板进阶使用
- 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);
- }
- }
标签:
HTML5,Canvas,绘图
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无一波HTML5 Canvas基础绘图实例代码集合的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]