1、Canvas绘图——JS绘图:
<canvas id=‘c1‘ width=‘‘ height=‘‘></canvas>
* Canvas尺寸不能用CSS设置;
c1.height=;
c1.width=;
var ctx=c1.getContext(‘2d‘);
常用属性:
ctx.fillStyle=‘#f00‘/gradient;
ctx.strokeStyle=‘#00f‘/gradient;
ctx.lineWidth=;
ctx.font=‘px sans-sarfi‘;
ctx.textBaseline=‘alphabetic‘;
ctx.shadowBlur=‘‘;
常用方法:
绘制矩形:
ctx.fillRect();
ctx.strokeRect();
ctx.clearRect();
绘制文本:
ctx.fillText();
ctx.strokeText();
ctx.measureText(txt).width;
2、Canvas绘图——绘制路径:
作用:①创建选区(clip),对画布内容进行裁剪;
②进行描边(stroke),绘制任意形状的折线;
③进行填充(fill),填充出任意形状的图形;
相关函数:
ctx.beginPath();——开始一条新路径
ctx.arc();——绘制一条椭圆/圆弧/圆路径
ctx.moveTo(x,y);——移动到指定点
ctx.lineTo(x,y);——从上一点到指定点绘制直线
ctx.busierCurve();——绘制贝塞尔曲线
ctx.closePath();——闭合路径
ctx.clip();——基于当前路径进行裁切
ctx.stroke();——基于当前路径进行描边
ctx.fill();——基于当前路径进行填充
3、Canvas绘图——绘制图像:
①图像定位点位于自己左上角;
②绘制:
ctx.drawImage(img,x,y);//原始大小绘制
ctx.drawImage(img,x,y,w,h);//使用指定宽高绘制图像——图像大小缩放
③绘制图像时,必须等待图片异步加载完成:
var img=new Image();
img.src="xx.png";//向服务器异步请求图片
img.onload=function(){
ctx.drawImage(img,x,y,[w],[h]);
}
④图象旋转:
ctx.totate(deg);
⑤旋转轴点——默认坐标轴原点,若以某个固定点旋转,则须平移画布的坐标原点:
ctx.translate(x,y);
4、基于Canvas的图表绘制框架/工具库:
①Chart.js——免费开源,九类图表
②Echart.js——免费,百度提供,中文手册
③FusionChart.js——收费,功能强大
HTML5_03之Canvas绘图
时间: 2024-10-12 06:24:18
HTML5_03之Canvas绘图的相关文章
canvas 绘图api的位置问题
今天因为canvas绘图的为之问题浪费了一些时间. 我们知道canvas的默认宽高是300X150嘛. 实际使用的时候当然是自定义一个高宽啦. 在js中通过canvasDom.style设置了某个高宽的时候,canvas在页面上也确实伸缩了. 但是用某些api的时候,传入位置参数时,还是按照300X150规格来处理位置的!如果想让位置居中的话,传入canvas.width/2或canvas.height/2就好了. 这是之前留意过的问题,今天才发现.可怜我试错地在模拟器上反复折腾,确定真相的我眼
HTML学习总结(四)【canvas绘图、WebGL、SVG】
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图.SVG 绘图很容易编辑与生成,但功能明显要弱一些. canvas可以完成动画.游戏.图表.图像处理等原来需要Flash完成的一
引言:Canvas绘图API快速入门
引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏动画效果的原理是怎样的?本篇文章将带您在20分钟内快速了解和上手HTML5游戏开发的神器:Canvas绘制API. 一.Canvas是什么? Canvas就是一个画布,可以进行画任何的线.图形.填充等一系列的操作,而且操作的画图就是js,所以让js编程到了嗑药的地步.另外Canvas不仅仅提供简单的
伙伴们休息啦canvas绘图夜空小屋
HTML5 canvas绘图夜空小屋 伙伴们园友们,夜深了,休息啦,好人好梦... 查看效果:http://hovertree.com/texiao/html5/28/ 效果图如下: 代码如下: 1 <!doctype html> 2 <html> 3 <head><meta name="viewport" content="width=device-width, initial-scale=1" /> 4 <t
Android中Canvas绘图之Shader使用图文详解
概述 我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什么呢?做过GPU绘图的同学应该都知道这个词汇,Shader就是着色器的意思.我们可以这样理解,Canvas中的各种drawXXX方法定义了图形的形状,画笔中的Shader则定义了图形的着色.外观,二者结合到一起就决定了最终Canvas绘制的被色彩填充的图形的样子. 类android.graphics
Android中Canvas绘图之PorterDuffXfermode使用及工作原理详解
概述 类android.graphics.PorterDuffXfermode继承自android.graphics.Xfermode.在用Android中的Canvas进行绘图时,可以通过使用PorterDuffXfermode将所绘制的图形的像素与Canvas中对应位置的像素按照一定规则进行混合,形成新的像素值,从而更新Canvas中最终的像素颜色值,这样会创建很多有趣的效果.当使用PorterDuffXfermode时,需要将将其作为参数传给Paint.setXfermode(Xfermo
Android中Canvas绘图基础详解(附源码下载)
Android中,如果我们想绘制复杂的自定义View或游戏,我们就需要熟悉绘图API.Android通过Canvas类暴露了很多drawXXX方法,我们可以通过这些方法绘制各种各样的图形.Canvas绘图有三个基本要素:Canvas.绘图坐标系以及Paint.Canvas是画布,我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面,在drawXXX方法中我们需要传入要绘制的图形的坐标形状,还要传入一个画笔Paint.drawXXX方法以及传入其中的坐标决定了要绘制的图形的形状
canvas绘图详解笔记(一)
声明一下:这里我不会用太多文字去详解介绍canvas是什么,相信了解过canvas的人都知道它的魅力所在,如果你对canvas还比较陌生的话,建议可以查阅相关资料了解一下.这里我将对canvas绘图详解课程做一次详细的笔记,方便大家和自己日后可以学习.那么接下来就是直接进入笔记内容的学习: 首先创建一个canvas元素,我们只需要在html文件中加入这么一句代码: <canvas id="canvas">当前浏览器不支持canvas,请更换浏览器使用!</canvas
获取canvas绘图环境
作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/32925369 我们用的最基本的绘图环境在canvas中绘图,通过调用canvas对象的getContext()方法来获取绘图环境.getContext()方法只需要一个参数:绘图环境的类型.在游戏中,我们使用2D类型的绘图环境. 获取canvas绘图环境 <!--<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前.--&