html5 canvas api w3c官方中文,HTML5 Canvas 简介
一、使用 Canvas 绘制路径
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
使用 stroke() 方法来绘制线条
通过指定从何处开始,在何处结束,来绘制一条线,如下代码:
您的浏览器不支持HTML5 Canvas标签
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
二、使用 Canvas 绘制圆形
使用 beginPath() 方法来清除当前画布中存在的路径 并且 准备开始绘制新的路径
调用 arc() 方法,传入相应的参数
使用 stroke() 方法来绘制线条
通过给定参数来规定圆的尺寸、颜色和位置,代码如下:
您的浏览器不支持HTML5 Canvas标签
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(80,28,25,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
执行一下
三、使用 Canvas 实现渐变
渐变效果可以填充在矩形、圆形、线条、文本等画布元素中, 各种形状可以自己定义不同的颜色;渐变效果目前有两种:
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
实现渐变的步骤和代码:
创建渐变对象(线性还是径向)
使用两种或两种以上的停止颜色来实现颜色渐变效果:addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1
应用渐变到画布元素中,设置画布上下文对象的 fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线
您的浏览器不支持HTML5 Canvas标签
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0); //线性
//var grd=ctx.createRadialGradient(75,50,5,90,60,100); //径向
grd.addColorStop(0,"blue");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
执行一下
四、使用 Canvas 绘制图像
获取或者创建 图像的dom对象
使用 drawImage 方法实现图像的绘制
把一幅图像放置到画布上代码如下:
您的浏览器不支持HTML5 Canvas标签
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//创建图像的dom对象,第一种方法
var img=new Image();
img.src="/static/resource/img/logo.png";
//创建图片的dom对象,第二种方法
//var img= document.getElementById("img");
ctx.drawImage(img,0,0);
执行一下
五、使用 Canvas 绘制文本
使用 font 属性来定义字体
使用 fillText(text,x,y) 在 canvas 上绘制实心的文本
使用 strokeText(text,x,y) 在 canvas 上绘制空心的文本
使用 "微软雅黑" 字体在画布上绘制一个高 30px 的文字(实心或空心),代码如下:
您的浏览器不支持HTML5 Canvas标签
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px 微软雅黑";
ctx.fillText("Hello World",10,50); //绘制实心文字
//ctx.strokeText("Hello World",10,50); //绘制空心文字
执行一下
html5 canvas api w3c官方中文,HTML5 Canvas 简介相关推荐
- html5通过api调数据库,使用HTML5数据库API [关闭](Using HTML5 Database API [closed])
使用HTML5数据库API [关闭](Using HTML5 Database API [closed]) 我正在开发一个使用phonegap/cordova 2.2的web应用程序,并希望将数据存储 ...
- html5 audio api 录音,如何使用HTML5 Web Audio API录制我的声音
在webkit浏览器上,您可以将 get user media api与webkitGetUserMedia一起使用 – 如 html5rocks所示. 如果你想用你的声音来创建javascript事 ...
- Android 中的 Canvas API
使用 Android Widget 组中不存在的自定义 UI 元素并想知道它是如何制作的? 这是 Android 中存在的 Canvas API 的魔力.我认为画布这个名字本身就定义了它是艺术家的游乐 ...
- 在Web应用程序中使用Canvas API
更多HTML 5文章请查阅HTML 6在线网站http://www.html5online.com.cn 本文概述 本文介绍如何在一个Web应用程序中利用HTML 5中的Canvas API创建.编辑 ...
- HTML5 基础知识,第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值,Canvas 提供的创造性,以及Web storage的离线应用
HTML5 集设计者和开发者于一身,其主要任务就是构建高效的丰富 Internet 应用程序之富网络应用 (Rich Internet Application,简称RIA),尤其是富 UI(User ...
- html绘制圆形和弧形的代码,通过HTML5 Canvas API绘制弧线和圆形的教程
在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: JavaScript Code复制内容到剪贴板 arc(x, y, ...
- HTML5 学习手笔二:canvas API 绘制树形图案A
上篇通过对canvas 画对角线,了解了一些canvas画图基本原理.现在可以利用HTML5 canvas API创建一个场景:带有长跑跑道的树林. 本篇大纲 用canvas API绘制树木的树冠 为 ...
- java canvas 缩放图片_详解如何用HTML5 Canvas API控制图片的缩放变换
摘要:这篇HTML5栏目下的"详解如何用HTML5 Canvas API控制图片的缩放变换",介绍的技术点是"html5_canvas.canvas.Html5.控制图片 ...
- html5 Canvas API
2.1 Canvas 概述 Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可以被放大缩小.此外,用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间. ...
最新文章
- Qt中子线程创建运行时候出现QObject: Cannot create children for a parent that is in a different thread
- csharp的几个特殊操作符
- OAuth 2.0协议在SAP产品中的应用
- Highchart series一次只显示一条
- ElasticSearch优化系列二:机器设置(内存)
- 2021-2025年中国短脉冲激光器行业市场供需与战略研究报告
- 从此,我就踏入IT行业拉
- JAVA透视相机安卓_透视相机下载安卓版
- 情感分类与朴素贝叶斯
- 使用shape绘制阴影图层阴影效果
- netcat基本使用方法总结
- root的家目录和普通用户的家目录
- idea 从入门到癫狂
- wps 甘特图_制作甘特图提升办公效率!亿图下的这款项目管理软件很不错
- Android 仿微信添加群聊界面——addView
- k8s-------(| 二 |)资源对象Namespace,Service
- buuctf[MRCTF2020]Ez_bypass
- 湖南文旅数据中心:湖南文旅数据早知道(9月7日)
- 什么是集群?什么是分布式?集群与分布式的区别,集群和分布式的关系。
- Qubole评论:自助式大数据分析
热门文章
- 前端XSS 过滤--亲测有效
- error: You have not concluded your merge (MERGE_HEAD exists).解决
- 【电脑配置知识】处理器 CPU
- python打开网页并实现点击
- 爬虫-豆瓣top250,东方财富网动态数据
- 机器学习决策树ID3
- java.lang.reflect.AccessibleObject
- Conda / Anaconda : UnavailableInvalidChannel The channel is not accessible or is invalid.
- 从业老学姐Python经验分享,别再相信培训机构“爬虫好学”的鬼话了,少走弯路!
- b区计算机复试国家线,今年调剂太恐怖 B区考研分数线竟比A区高?