Canvas的基本用法 |
您所在的位置:网站首页 › 怎么使用canvas › Canvas的基本用法 |
H5中有一个特别好玩的标签--标签 什么是 canvas?HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. 标签只是图形容器,必须使用脚本来绘制图形。 可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 canvas 主要应用的领域1.游戏:canvas 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧,canvas 游戏在流畅度和跨平台方面更牛。 2. 可视化数据图表,比如:百度的echart 3.banner广告: Flash曾经辉煌的时代,只能手机还未出世。现在以及未来的智能机时代,HTML5技术能在banner广告上发挥巨大作用,用Canvas实现动态的广告效果。。 。。。。 创建一个画布 使用 JavaScript 来绘制图像 var c=document.getElementById("myCanvas"); //获得画布 var ctx=c.getContext("2d"); //获得上下文 ctx.fillStyle="#FF0000"; //颜色填充 ctx.beginPath(); //开始路径 ctx.moveTo(0,0); //出发位置 ctx.lineTo(200,100); //移动位置 在canvas中绘制圆形 arc(x,y,r,start,stop) //圆的x轴坐标,圆的y轴坐标,圆的半径,开始的弧度,结束的弧度 Canvas - 渐变渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。 以下有两种不同的方式来设置Canvas渐变: createLinearGradient(x,y,x1,y1) - 创建线条渐变 createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变当我们使用渐变对象,必须使用两种或两种以上的停止颜色。 addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1. 使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。 Canvas的作用远不止以上所述,仅个人所知 原文地址:https://www.cnblogs.com/mss-sb/p/17185675.html |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |