canvas(1)---基础知识

1.在html中创建一个canvas标签:

 <canvas id='canv' width='800' height='800'></canvas>//注意:宽高只能这样写,不能在样式中写,但是可以在样式中写背景颜色

2.script中:

var canv = document.getelementById(‘canv’);
//使用画布上下文:
var ctx = canv.getContext(‘2d’);
3.开始绘制:

ctx.fillRect(x,y,w,h)//绘制一个矩形填充
ctx.strokeRect(x,y,w,h)//绘制一个矩形的描边
ctx.beginPath();//开始绘制路径
ctx.closePath();封闭路径
ctx.moveTo(x,y)//画笔开始的位置
ctx.lineTo(x,y)//画线,画笔移动到此,可以有多个
ctx.strokeStyle = ‘red’//颜色设置

4.canvas圆形:
canvas中是弧度制, 360° = 2 * PI ; 单位rad.
圆弧及贝塞尔曲线:

canvas(1)---基础知识相关推荐

android Canvas 最基础知识总结
学习Canvas 要先学习view 知识,这样才好学习第一步创建一个方法让它继承 View 如下图然后快捷键ait+/ 生成构造方法, 用来初始化View ,比如自定一个一些init()方法, ...
前端使用Canvas绘图(基础知识)--持续更新中
文章目录前言 canvas文档一.canvas代码提示(插件和注释) 1.1.使用插件方式(推荐这种方式) =>canvas-snippets 1.2.使用注释方式二.初始canvas 2 ...
好程序员分享24个canvas基础知识小结
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
好程序员分享24个canvas基础知识小结 1
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识
基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body>&l ...
H5：画布Canvas基础知识讲解（三）之文字、阴影、颜色渐变
上一节介绍了H5:画布Canvas基础知识讲解(二)之插入图像.像素级操作,接下来继续讲解H5:画布Canvas基础. 文字虽然最近的WebKit版本和Firefox 3.1 nightly bui ...
html5基础知识文档,HTML5基础知识（1）
原标题:HTML5基础知识(1) html5是万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力, ...
java基础知识多线程
package org.base.practise9; import org.junit.Test; import java.awt.event.WindowAdapter; import java. ...
HTML5 基础知识
HTML5 基础知识什么是 HTML? HTML 是一种超文本标记语言,"超文本"就是指页面内可以包含图片.链接.深职音乐.视频.程序等非文字元素 HTML 不是一种编程语言 H ...

canvas(1)---基础知识

canvas(1)---基础知识相关推荐

最新文章

热门文章